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

折り返す

item 1

item 2

item 3

item 4

item 5

CSS

逆方向へ折り返す

item 1

item 2

item 3

item 4

item 5

CSS

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