flex-wrap

例

折り返さない

flex-nowrap を使用して、flexアイテムが折り返されるのを防ぎ、必要に応じて柔軟性のないアイテムがコンテナからオーバーフローするようにします。

<div class="flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

通常どおり折り返す

flex-wrap を使用して、flexアイテムが折り返されるようにします。

<div class="flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

反転して折り返す

flex-wrap-reverse を使用して、flexアイテムを逆方向に折り返します。

<div class="flex flex-wrap-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

レスポンシブデザイン

プレフィックスa flex-wrap ユーティリティ md: のようなブレークポイントバリアントとともにユーティリティを適用して、medium 画面サイズ以上でのみ適用します。

<div class="flex flex-wrap md:flex-wrap-reverse ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。