理解しておきたい! 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の構造を理解するとよりレイアウトを組みやすくなります。
どんどん使いこなしてみましょう!

この記事をシェア

  • Twitter
  • Facebook
  • hatena-bookmark

合わせて読みたい