Flexアイテムの折り返し
Flexアイテムの折り返す方法を変更する場合は、flex-wrapプロパティ（旧仕様ではbox-linesプロパティ）を使用します。
Flexアイテムは、通常Flexアイテムの合計幅がFlexコンテナーの幅を超えると、Flexアイテムの幅は自動的に縮小していきます（flex-growに応じて縮小の仕方は異なる）が、flex-wrapプロパティを設定することで、折り返すようになります。
flex-wrapはflex-directionの指定によって折り返す方向が変わります。
なお、flex-wrapプロパティはショートハンドであるflex-flowプロパティの2番目の指定にあたります。
構文
flex-wrap:折り返し方法;または
flex-wrap:flex-direction 折り返し方法;指定可能な値
| 値 | 値（旧仕様） | 説明 |
|---|---|---|
| nowrap | single | 折り返さない初期値 |
| wrap | multiple | 折り返す |
| wrap-reverse | 逆方向へ折り返す |
サンプルコード
item 1
item 2
item 3
item 4
item 5
CSS
div.flex-container {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}シミュレーション
- 1
- 2
- 3
- 4
- 5
- 6
- 7