flex-wrapでフレックスアイテムの折り返しを指定【CSS】

flex-wrapプロパティは、Flexboxにおけるフレックスアイテムの折り返しを指定するプロパティです。

また、折り返す場合の方向も指定できます。

flex-wrapの値の指定方法

flex-wrapプロパティでは、以下のような値を指定できます。

スマホのように画面幅が狭ければ折り返されていると思いますが、パソコンで見る場合はウィンドウ幅を狭めて、どのようにフレックスアイテムが折り返されているか確認してみてください。

nowrap

nowrapを指定すると、フレックスアイテムは折り返されず、1行で表示されます。

wrap

wrapを指定すると、フレックスアイテムは折り返され、複数行で表示されます。

通常は上から下に折り返され、2行目以降のフレックスアイテムは左から右に配置されます。

wrap-reverse

wrap-reverseを指定すると、wrapのとき同様、フレックスアイテムは折り返され、複数行で表示されます。

ただし、wrapとは逆に、下から上に折り返されます。