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の学習本を探してる方はこちらの記事をどうぞ
