justify-content/align-items/align-contentの違い

フレックスボックスでアイテムを配置する際に使用するプロパティですが、違いがわからなかったのでまとめてみました。

justify-content

フレックスコンテナーの主軸に沿って、中身のアイテムの間や周囲に間隔を配置します。

※主軸 = flex-directionで設定された向き(文書の書字方向)

文書が横書きの場合、アイテムは水平方向に動きます。

align-items

フレックスコンテナーの交差軸に沿って、中身のアイテムの配置を設定します。

アイテム間の間隔は変わりません。

※交差軸 =  主軸と交差

文書が横書きの場合、アイテムは水平方向に動きます。

align-content

フレックスコンテナーの交差軸に沿って、中身のアイテムの間や周囲に間隔を配置します。

文書が横書きの場合、アイテムは水平方向に動きます。

ただし、単一行のコンテナーでは、このプロパティは効果がなく、 flex-wrap: wrap の指定が必要です。

★参考:

Flexbox 16 (justify-content/align-items/align-contentの違い)

https://pandaignis.com/wp/38851.html http://www.webdesign-fan.com/ajaxzip3

フレックスボックスでのボックス配置 – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox h

この記事が気に入ったら
いいね ! しよう

Twitter で