1. Flexbox & Grid
  2. flex-direction

Flexbox & Grid

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
<div class="flex flex-row ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

反向行

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

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

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

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

反向列

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

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

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策