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

CSS

div.flexbox-container {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-flex-line-pack:justify;
	-moz-flex-line-pack:justify;
	-webkit-align-content:space-between;
	-moz-align-content:space-between;
	align-content:space-between;
}

シミュレーション

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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