理解しておきたい! flexboxのflex-wrap、flex-flowについて

こんにちは！AndHAコーディング部です。
前回はflexboxの概要とflex-directionについて紹介しましたが、
今回はflex-wrap、flex-flowについてご紹介します。

https://and-ha.com/coding/flexbox-and-flexdirection/

flex-wrapの概要

flexアイテムを、単一行や複数行に折り返し指定します。折り返す時の方向も指定可能です。

指定できる値

nowrap(既定値)
折り返しされず一行に表示されます。
以下のような表示になります。

See the Pen
nowrap by ha-01 (@hasamplecom)
on CodePen.

wrap
子要素が折り返され、複数行に表示されます。
※ボックス幅（親幅）がない限りは複数行となりません。
以下のような表示になります。

See the Pen
wrap by ha-01 (@hasamplecom)
on CodePen.

wrap-reverse
子要素が折り返され、複数行に下から上に並びます。
※ボックス幅（親幅）がない限りは複数行となりません。
以下のような表示になります。

See the Pen
wrap-reverse by ha-01 (@hasamplecom)
on CodePen.

flex-flowの概要

flexアイテムの並びと折り返しを同時に指定します。
flex-directionとflex-wrapを一括指定できます。

指定できる値

row nowrap(既定値)
一行の横並びで表示されます。
以下のような表示になります。

See the Pen
row nowrap by ha-01 (@hasamplecom)
on CodePen.

row-reverse nowrap
一行で逆順の横並びに表示されます。
以下のような表示になります。

See the Pen
row-reverse nowrap by ha-01 (@hasamplecom)
on CodePen.

row wrap
複数行の横並びで表示されます。
※ボックス幅（親幅）がない限りは複数行となりません。
以下のような表示になります。

See the Pen
row wrap by ha-01 (@hasamplecom)
on CodePen.

row wrap-reverse
複数行で逆順の横並びに表示されます。
※ボックス幅（親幅）がない限りは複数行となりません。
以下のような表示になります。

See the Pen
row wrap-reverse by ha-01 (@hasamplecom)
on CodePen.

row-reverse wrap-reverse
逆順の複数行で逆順の横並びに表示されます。
※ボックス幅（親幅）がない限りは複数行となりません。
以下のように表示されます。

See the Pen
row-reverse wrap-reverse by ha-01 (@hasamplecom)
on CodePen.

column nowrap
一行の縦並びで表示されます。
以下のような表示になります。

See the Pen
column nowrap by ha-01 (@hasamplecom)
on CodePen.

column-reverse nowrap
一行で逆順の縦並びに表示されます。
以下のような表示になります。

See the Pen
column-reverse nowrap by ha-01 (@hasamplecom)
on CodePen.

column-reverse wrap
複数行で逆順の縦並びに表示されます。
以下のような表示になります。

See the Pen
column-reverse wrap by ha-01 (@hasamplecom)
on CodePen.

column-reverse wrap-reverse
逆順の複数行で逆順の縦並びに表示されます。
以下のような表示になります。

See the Pen
column-reverse wrap-reverse by ha-01 (@hasamplecom)
on CodePen.

参考になる記事

flex-wrap、flex-flowについては以下の記事がおすすめです。

flex-wrap – CSS: カスケーディングスタイルシート | MDN

flex-flow – CSS: カスケーディングスタイルシート | MDN

CSS flex-flow

最後に

いかがでしたでしょうか?
flex-wrap、flex-flowの構造を理解するとよりレイアウトを組みやすくなります。
どんどん使いこなしてみましょう!