Lzh on GitHub

flex-direction

控制弹性项目排列方向的实用工具。

快速参考

类样式
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;
为flex布局父容器属性。

示例

行

使用 flex-row 使弹性项目在水平方向上按文本方向排列：

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

反向行

使用 flex-row-reverse 使弹性项目在水平方向上反向排列：

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

列

使用 flex-col 使弹性项目在垂直方向上排列：

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

反向列

使用 flex-col-reverse 使弹性项目在垂直方向上反向排列：

01
02
03
<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>

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