【CSS】Flexコンテナ内のFlexアイテムの折り返し設定flex-wrapプロパティ

flex-wrapプロパティはFlexコンテナ内のFlexアイテムを一行で表示するか、行を折り返して複数行で表示させるかを指定します。

flex-direction: row;のとき

wrap

以下のサンプルのように、FlexアイテムがFlexコンテナの端に当たると文字の表記方向に従って折り返し折改行します。

まずflexコンテナの指定では、通常の左から右への横並び「flex-direction: row;」と改行「flex-wrap: wrap;」を指定しました。

これは２つを合わせて「flex-flow:row wrap;」に書き換えても同様の効果が得られます。

flex-flowプロパティはflex-directionとflex-wrapのショートハンドプロパティです。初期値はrow nowrapです。

[CSS]　flexコンテナ

#flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 90%;
	min-width: 500px;
	border:1px dotted #FF00FF;
　　}

「flex: auto;」を指定することで、flexコンテナ内の範囲でflexアイテムが伸び縮みされます。

これは「flex: [flex-grow] [flex-shrink] [flex-basis]」= 「flex:1 1 auto;」に指定することと同じです。

[CSS]　flexアイテム

 .flex-items｛
	flex: auto;
	min-width:110px;
	height: 50px;
	background:#999;
	border-radius: 2px;	
	margin:3px;
　　}

nowrap

行の折り返しはありません。一行で表示します。初期値となります。

[CSS]　flexコンテナ

#flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 90%;
	min-width: 500px;
	border:1px dotted #FF00FF;
　　}

FlexアイテムはFlexコンテナの端に当たるとコンテナ内に収まるようにFlexアイテムの大きさが調整され配置されます。

ただFlexアイテムに横幅(width)を指定しちゃうと、flex:autoが効かなくなり、Flexコンテナに収まらないFlexアイテムはFlexコンテナの表示領域からはみ出てしまいます。

[CSS]　flexアイテム

 .flex-items｛
	flex: auto;
	height: 50px;
	background:#999;
	border-radius: 2px;	
	margin:3px;
　　}

wrap-reverse

Flexコンテナの行に収まり切らなかった場合、折り返し複数行になります。文字の表記方向とは逆に折り返します。

[CSS]　flexコンテナ

#flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap-reverse;
	width: 90%;
	min-width: 500px;
	border:1px dotted #FF00FF;
　　}

flex-direction: column;のとき

wrap

nowrap

wrap-reverse