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