Flexbox & Grid
用于控制 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 项目水平排列,方向与文本相同
<div class="flex flex-row ..."> <div>01</div> <div>02</div> <div>03</div></div>
使用 flex-row-reverse
使 flex 项目水平排列,方向相反
<div class="flex flex-row-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>
使用 flex-col
使 flex 项目垂直排列
<div class="flex flex-col ..."> <div>01</div> <div>02</div> <div>03</div></div>
使用 flex-col-reverse
使 flex 项目垂直排列,方向相反
<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>
了解有关在变体文档中使用变体的更多信息。