flex-direction

示例(Examples)

¥Examples

行(Row)

¥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)

¥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)

¥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)

¥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)

¥Responsive design

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

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

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