シュウ

今回は【CSS】flex-wrapの使い方、アイテムの折り返しを指定する!
の解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• displayプロパティについて学びたい方へ
• 今回はflex-wrapでflexboxアイテム(子要素)の折り返しについての解説になります。

前回は、displayプロパティで指定した、flexboxアイテム(子要素)の方向についての解説になりました。
【前回の記事 CSS】flex-directionの使い方、配置する方向を指定する!

Flexboxでは様々なレイアウトが可能になります。
現在はほとんどのブラウザやデバイスが対応していますので、是非参考にしてみてください。
指定項目が多いため、パートに分けて解説していきます。

flex-wrapの使い方について

flex-wrapプロパティとは、flexboxアイテムの折り返しを指定します。
※必ず、親要素にdisplay:flexまたはinline-flexを指定しておきましょう。
書き方は以下のようになります

親要素 {
	display: flex / inline-flex;
	flex-wrap: 折り返し;

	/*--内訳
	①display: flex;
	②display: inline-flex;
	①か②のどちらかを指定します。
	--*/
}

flex-wrapの指定について

flex-wrapプロパティとは、flexboxアイテム(子要素)の折り返しを指定します。
指定することにより、flexboxアイテムが並んだときにflexboxコンテナ(親要素)幅を超えたとき
自動で折り返ししてくれます。

共通指定について

displayプロパティである、「flex / inline-flex」を親要素に指定することで、その要素をflexboxコンテナ(入れ物、箱)に指定できます。
flexboxコンテナ(親要素)の子要素は自動的にflexboxアイテムのなり、さまざまなレイアウトが可能になります。

ポイント！
①親要素にdisplayプロパティである、「flex / inline-flex」を指定します。
②子要素は自動的にflexboxアイテムになります。
※子要素にdisplayプロパティは指定しないようにしましょう!!

<!--親要素-->
<div class="flex-container">
 <!--子要素-->
 <div class="flex-item">①</div>
 <div class="flex-item">②</div>
 <div class="flex-item">③</div>
 <div class="flex-item">④</div>
 <div class="flex-item">⑤</div>
</div>

/*--親要素--*/
.flex-container {
	background-color: #ffffff;
	border: solid 5px #fb6158;
	padding: 40px;
	box-sizing: border-box;
}

/*--子要素--*/
.flex-item {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	background-color: #1ece50;
	padding: 30px;
	box-sizing: border-box;
}

親要素にdisplayプロパティである、「flex / inline-flex」を指定はしていません。
displayプロパティを指定していないため、子要素は横並びにはならず、左寄せの状態になっております。

nowrap(初期値)の指定について

flex-wrap: nowrapとは、flexboxアイテムは折り返しせず、1行で配置されます。
今回はflexboxアイテム①〜⑨を配置します。
このように、「①〜⑨」のflexboxアイテムは左から右に配置され、flexboxアイテム数が増えても折り返しはしません。

/*--上記のHTMLと同じになります--*/

 /*--親要素--*/
.flex-container {
	display: flex;
	flex-wrap: nowrap; /*--折り返しの指定--*/
	
	/*--以下装飾--*/
	background-color: #ffffff;
	border: solid 5px #fb6158;
	padding: 40px;
	box-sizing: border-box;
}

/*--子要素--*/
.flex-item {/*--装飾省略--*/}

wrapの指定について

flex-wrap: wrapとは、flexboxアイテム折り返しされ、上から下に配置されます。
今回はflexboxアイテム1〜15を配置します。
このように、「1〜15」のflexboxアイテムは左から右に配置され、flexboxアイテム数が増える度に、
コンテンツ幅で折り返しされます。

/*--上記のHTMLと同じになります--*/

 /*--親要素--*/
.flex-container {
	display: flex;
	flex-wrap: wrap; /*--折り返しの指定--*/
	
	/*--以下装飾--*/
	background-color: #ffffff;
	border: solid 5px #fb6158;
	padding: 40px;
	box-sizing: border-box;
}

/*--子要素--*/
.flex-item {/*--装飾省略--*/}

wrap-reverseの指定について

flex-wrap: wrap-reverseとは、flexboxアイテム折り返しされ、下から上に配置されます。
今回はflexboxアイテム1〜15を配置します。
このように、「1〜15」のflexboxアイテムは左から右に配置され、flexboxアイテム数が増える度に、
コンテンツ幅で折り返しされます。

/*--上記のHTMLと同じになります--*/

 /*--親要素--*/
.flex-container {
	display: flex;
	flex-wrap: wrap-reverse; /*--折り返しの指定--*/
	
	/*--以下装飾--*/
	background-color: #ffffff;
	border: solid 5px #fb6158;
	padding: 40px;
	box-sizing: border-box;
}

/*--子要素--*/
.flex-item {/*--装飾省略--*/}

flex-flowの指定について

flex-flowプロパティとは、方向と折り返しを指定します。
※必ず、親要素にdisplay:flexまたはinline-flexを指定しておきましょう。
書き方は以下のようになります

親要素 {
	display: flex / inline-flex;
	flex-flow: -direction(方向) -wrap(折り返し);

	/*--内訳
	①display: flex;
	②display: inline-flex;
	①か②のどちらかを指定します。
	--*/
	
	/*--内訳
	①-direction(方向)
	②-wrap(折り返し)
	①、②を続けて指定します。
	--*/
}

flex-flowプロパティでは、方向と折り返しを一括指定できます。
row-reverse(方向)flexboxアイテムを右から左に指定します。
wrap(折り返し)flexboxアイテム折り返しされ、上から下に配置されます

/*--上記のHTMLと同じになります--*/

 /*--親要素--*/
.flex-container {
	display: flex;
	flex-flow: row-reverse wrap; /*--方向と折り返しの指定--*/
	
	/*--以下装飾--*/
	background-color: #ffffff;
	border: solid 5px #fb6158;
	padding: 40px;
	box-sizing: border-box;
}

/*--子要素--*/
.flex-item {/*--装飾省略--*/}

関連記事

まとめ

今回はこれで以上です。
次回は「flexboxアイテムを配置する順番」について解説します。

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【CSS】背景画像を複数設置について解説!

  2023.12.14

• 

  【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

  2023.06.22

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

関連記事

< 前の記事

【CSS】flex-directionの使い方、配置する方向を指定する!

次の記事 >

【CSS】orderの使い方、アイテムの配置する順番を指定する!