justify-contentでフレックスアイテムの揃え位置を指定【CSS】

justify-contentプロパティは、フレックスアイテムを揃える位置を指定するプロパティです。

justify-contentの値の指定方法

justify-contentプロパティでは、以下のような値を指定できます。

flex-start

flex-startを指定すると、フレックスコンテナの主軸の起点に揃えられ、通常は左端に配置されます。

flex-end

flex-endを指定すると、フレックスコンテナの主軸の終点に揃えられ、通常は右端に配置されます。

center

centerを指定すると、フレックスコンテナの主軸の幅の中央に揃えられ、左右中央に配置されます。

space-between

space-betweenを指定すると、フレックスコンテナの主軸の幅に対して余白をもって等間隔に配置されます。

余白がない場合は、flex-startと同じ配置になります。

space-around

space-aroundを指定すると、フレックスコンテナの主軸の幅に対して余白をもって等間隔に配置されます。

space-betweenと異なるのは、起点と終点との間にも間隔が生じるという点で、余白がない場合は、centerと同じ配置になります。