flex-direction

flex-direction

用于控制 Flex 项目方向的实用工具。

类名样式

类名	样式
`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 将 Flex 项目水平放置，方向与文本方向相同

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

使用 flex-row-reverse 将 Flex 项目水平放置，方向与文本方向相反

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

使用 flex-col 将 Flex 项目垂直放置

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

使用 flex-col-reverse 将 Flex 项目垂直放置，方向与文本方向相反

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

前缀a flex-direction 实用工具使用断点变体，例如 md:，以仅在以下情况下应用实用工具中等屏幕尺寸及以上

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

在变体文档中了解更多关于使用变体的信息。