flex-direction

示例(Examples)

行(Row)

使用 flex-row 将弹性项目沿与文本相同的方向水平排列：

🌐 Use flex-row to position flex items horizontally in the same direction as text:

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

行颠倒(Row reversed)

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

🌐 Use flex-row-reverse to position flex items horizontally in the opposite direction:

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

列(Column)

使用 flex-col 垂直定位弹性项目：

🌐 Use flex-col to position flex items vertically:

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

列颠倒(Column reversed)

使用 flex-col-reverse 将弹性项目垂直定位到相反方向：

🌐 Use flex-col-reverse to position flex items vertically in the opposite direction:

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

响应式设计(Responsive design)

在 flex-direction 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。