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 项目沿与文本相同的方向水平排列：

01

02

03

<!-- [!code classes:flex-row] -->
<div class="flex flex-row ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

反向行

使用 flex-row-reverse 将 flex 项目沿相反方向水平排列：

01

02

03

<!-- [!code classes:flex-row-reverse] -->
<div class="flex flex-row-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

列

使用 flex-col 将 flex 项目垂直排列：

01

02

03

<!-- [!code classes:flex-col] -->
<div class="flex flex-col ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

反向列

使用 flex-col-reverse 将 flex 项目沿相反方向垂直排列：

01

02

03

<!-- [!code classes:flex-col-reverse] -->
<div class="flex flex-col-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

响应式设计

使用 md: 等断点变体作为 flex-direction 工具类的前缀，即可只在中等屏幕尺寸及以上生效：

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

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