CSS

flexboxのspace-betweenで最後の要素を左に寄せる方法

CSSのjustify-contentプロパティは、フレックスコンテナ内の要素を配置する際に便利な機能です。特にspace-between値は、要素間に均等なスペースを作成することができます。しかし、space-betweenを使用する場合、最後の要素が右側に寄ってしまい、デザインに違和感を生じることがあります。このブログ記事では、space-betweenを使用した際に最後の要素を左に寄せる方法を解説します。

擬似要素を使う

justify-content: space-betweenと組み合わせて、最後の要素を左に寄せる方法として、擬似要素を利用する方法があります。以下は実装方法です。

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-container::after {
  content: "";
  flex: 1;
}

 

このコードでは、.flex-container内の要素に対してjustify-content: space-betweenが適用され、要素間に均等なスペースが作成されます。そして、.flex-container::after擬似要素を使用して、追加のスペースを作成し、最後の要素を左側に寄せることができます。

 

flexboxの余白を調整する

もう一つの方法として、余白を調整することで最後の要素を左に寄せる方法があります。以下のようにコードを記述します。

.flex-container {
  display: flex;
  justify-content: space-between;
  margin-right: auto;
}

 

この場合、margin-right: autoが適用されることで、最後の要素が左に寄せられます。justify-content: space-betweenは要素間にスペースを均等に配分するため、margin-right: autoにより最後の要素が左側に寄せられる効果が生じます。

 

まとめ

この記事では、justify-content: space-betweenを使用した際に最後の要素を左に寄せる2つの方法を解説しました。擬似要素を使う方法と、margin-right: autoを利用する方法です。ぜひ活用してみてください。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...

 

ABOUT ME
りん
QA 1年 / Webデザイナー 2年 / SE 2年 / フリーランスSE 1年 / SE人事・開発PM 半年 / 沖縄から福岡に移住3年目 / 趣味や好きなことをブログにまとめてます