flex-direction

フレックスアイテムの方向を制御するためのユーティリティ。

クラススタイル

クラス	スタイル
`flex-row`	`flex-direction: row;`
`flex-row-reverse`	`flex-direction: row-reverse;`
`flex-col`	`flex-direction: column;`
`flex-col-reverse`	`flex-direction: column-reverse;`

flex-row

flex-direction: row;

flex-row-reverse

flex-direction: row-reverse;

flex-col

flex-direction: column;

flex-col-reverse

flex-direction: column-reverse;

例

flex-row を使用して、フレックスアイテムをテキストと同じ方向に水平方向に配置します。

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

flex-row-reverse を使用して、フレックスアイテムを水平方向で反対方向に配置します。

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

flex-col を使用して、フレックスアイテムを垂直方向に配置します。

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

flex-col-reverse を使用して、フレックスアイテムを垂直方向で反対方向に配置します。

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

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

<div class="flex flex-col md:flex-row ...">
  <!-- ... -->
</div>

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