CSSリファレンス

justify-contentの意味と使い方

「justify-content」はフレックスコンテナ内の主軸の方向に余白が生じる場合に、フレックスアイテムと余白をどのように配置するのかを指定するプロパティです。このプロパティはフレックスコンテナに対して適用します。

値の指定方法

フレックスアイテムはフレックスコンテナの始端側に配置されます。主軸の方向の余白はすべてのフレックスアイテムの末尾に配置されます。

フレックスアイテムはフレックスコンテナの終端側に寄せて配置されます。主軸方向の余白はすべてのフレックスアイテムの先頭に配置されます。

フレックスアイテムはフレックスボックスの中央に寄せられます。主軸方向の余白は全てのフレックスアイテムの先頭と末尾に配置されます。

最初のフレックスアイテムの始端がフレックスボックスの始端に、最後のフレックスアイテムの終端がフレックスボックスの終端に揃えて配置されます。残りのフレックスアイテムは、主軸方向の余白が各フレックスアイテムの間で均等に分配されるようにして配置されます。

フレックスアイテムは、主軸方向の余白が各フレックスアイテムの間で均等に分配されるようにして配置されますが、先頭と末尾の余白は他の余白の半分になります。フレックスアイテムが1つだけのときは「center」を指定した場合と同じになります。