スポンサーリンク
スポンサーリンク

フレックスコンテナ内の主軸方向の配置方法を指定する

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

justify-contentプロパティ
説明
flex-start フレックスアイテムはフレックスコンテナの始端側に寄せて配置されて、主軸方向の余白は全てフレックスアイテムの末尾に配置される。
flex-end フレックスアイテムはフレックスコンテナの終端側に寄せて配置されて、主軸方向の余白は全てフレックスアイテムの先頭に配置される。
center フレックスアイテムはフレックスボックスの中央に寄せられます。主軸方向の余白は均等に2分割されて、すべてのフレックスアイテムの先頭と末尾に配置される。
space-between 最初のフレックスアイテムの始端がフレックスボックスの始端に、
最後のフレックスアイテムの終端がフレックスボックスの終端に揃えて配置される。残りのフレックスアイテムは、主軸方向の余白が各フレックスアイテムの間で均等に分配されるように配置される。フレックスアイテムが1つだけのときは「flex-start」と同じです。IE10,webkit系ブラウザでは「justify」と指定すると同様の配置です。
space-around フレックスアイテムは、主軸方向の余白が各フレックスアイテムの間で均等に分配されるように配置されますが、先頭と末尾の余白は、他の余白の半分になり、フレックスアイテムが1つのときは、「center」で指定したときと同じ。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました