CSS

The flex-wrap property controls whether elements inside a Flexbox container wrap (line break) or not. nowrap means no wrapping, wrap wraps elements as needed, and wrap-reverse wraps them in reverse order.

flex-wrap

　flex-wrapプロパティは、Flexboxコンテナ内の要素の折り返し（改行）の挙動を制御します。Flexboxコンテナは、要素を１つ以上の行または列に配置するために使用され、flex-wrapはその要素の配置方法を調整するための強力なツールです。

値の種類

nowrap（デフォルト）
nowrapは要素を折り返さず、１つの行または列に配置し続けます。要素がコンテナの幅（または高さ）を超えた場合、オーバーフローします。
wrap
wrapは要素を折り返し、必要に応じて新しい行または列に配置します。コンテナの幅（または高さ）を超えた場合、要素は新しい行に折り返されます。
wrap-reverse
wrap-reverseは要素を折り返し、逆の順序で新しい行または列に配置します。これは要素の順序を逆にする効果があります。

Sample

flex-wrap: nowrap; を指定

item1
item2
item3
item4
item5

flex-wrap: wrap; を指定

item1
item2
item3
item4
item5

flex-wrap: wrap-reverse; を指定

item1
item2
item3
item4
item5

HTML

<p>flex-wrap: nowrap; を指定</p>
<div class="sample" style="flex-wrap: nowrap;">
	<div>item1</div>
	<div>item2</div>
	<div>item3</div>
	<div>item4</div>
	<div>item5</div>
</div>

<p>flex-wrap: wrap; を指定</p>
<div class="sample" style="flex-wrap: wrap;">
	<div>item1</div>
	<div>item2</div>
	<div>item3</div>
	<div>item4</div>
	<div>item5</div>
</div>

<p>flex-wrap: wrap-reverse; を指定</p>
<div class="sample" style="flex-wrap: wrap-reverse;">
	<div>item1</div>
	<div>item2</div>
	<div>item3</div>
	<div>item4</div>
	<div>item5</div>
</div>

CSS

.sample {
	display: flex;
	width: 200px;
	background-color: palegreen;
	margin: 10px;
}

.sample div {
	background-color: green;
	color: ghostwhite;
	margin: 4px;
	padding: 4px;
}

Browser support