Flexアイテムが折り返された時の位置揃え

Flexアイテムが折り返された時の位置を揃える場合は、align-contentプロパティ(旧仕様ではflex-line-packプロパティ)を使用します。

【構文】

							align-content:揃え方;
						

指定可能な値

値(旧仕様) 説明
space-between justify 等幅
space-around distribute 等幅(先端・終端にも余白)
flex-start start 上寄せ(flex-directionがcolumnの場合は左寄せ)
flex-end end 下寄せ(flex-directionがcolumnの場合は右寄せ)
center center 中央
stretch stretch 全体幅(初期値)

サンプル

等幅

item 1

item 2

item 3

item 4

item 5

等幅(先端・終端にも余白)

item 1

item 2

item 3

item 4

item 5

上寄せ

item 1

item 2

item 3

item 4

item 5

下寄せ

item 1

item 2

item 3

item 4

item 5

中央

item 1

item 2

item 3

item 4

item 5

全体幅(初期値)

item 1

item 2

item 3

item 4

item 5

【CSS3】

CSS3逆引きリファレンス一覧へ戻る