【便利】justify-contentの種類

前回の記事で紹介したflex-box。

そこで最後に少しだけ書いたjustify-contentの他の指定を紹介していきます。

justify-contentとは？

display: flex;で指定した子要素の配置や間隔を指定したい時に使うcssのプロパティです。

display: flex;で横並びにしてから、justify-content: ここに指定します;

まずは前回の記事の最後（https://shinjin-corder.com/2021/09/21/267/）でも紹介したjustify-content: space-between;です。

このような表示になります。

初期値になります。

通常左寄せで配置されます。

中央に配置されます。

通常右寄せで配置されます。

左右の余白を含めて均等に配置されます。

space-betweenとの違いは左右の余白も含めることです。

特にjustify-content: space-between;は使う場面がとても多いので、慣れるととても便利だと思います。