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>

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