flex-direction

flex-direction

用于控制 flex 项目方向的工具类。

Class Styles

Class	Styles
`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>

Prefix a flex-direction utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.