CSS flex-wrap

CSS の flex-wrap は、フレキシブルボックスのアイテムをコンテナの幅に合わせて折り返すかどうかを指定するプロパティです。

構文

flex-warp: value

値

以下に示す値を flex-warp に指定できる。

value
フレキシブルボックスのアイテムを折り返すかどうかを下記の値で指定する。
flex-wrap
値 説明
nowrap 折り返さない
wrap 折り返す
wrap-reverse 逆順に折り返す

初期値

nowrap

使用例

フレキシブルボックスにおいて、幅250ピクセルのコンテナの中に、幅100ピクセルのアイテムを折り返さずに並べる。

<div style="display:flex; flex-wrap:nowrap; width:250px;">
  <div style="flex:auto; width:100px; border:1px solid gray;">A</div>
  <div style="flex:auto; width:100px; border:1px solid gray;">B</div>
  <div style="flex:auto; width:100px; border:1px solid gray;">C</div>
</div>
A
B
C

フレキシブルボックスにおいて、幅250ピクセルのコンテナの中に、幅100ピクセルのアイテムを折り返して並べる。

<div style="display:flex; flex-wrap:wrap; width:250px;">
  <div style="flex:auto; width:100px; border:1px solid gray;">A</div>
  <div style="flex:auto; width:100px; border:1px solid gray;">B</div>
  <div style="flex:auto; width:100px; border:1px solid gray;">C</div>
</div>
A
B
C

フレキシブルボックスにおいて、幅250ピクセルのコンテナの中に、幅100ピクセルのアイテムを折り返して逆順に並べる。

<div style="display:flex; flex-wrap:wrap-reverse; width:250px;">
  <div style="flex:auto; width:100px; border:1px solid gray;">A</div>
  <div style="flex:auto; width:100px; border:1px solid gray;">B</div>
  <div style="flex:auto; width:100px; border:1px solid gray;">C</div>
</div>
A
B
C

関連記事

参考文献

World Wide Web Consortium (2018) CSS Flexible Box Layout Module Level 1