弹性盒子与网格
用于控制弹性项目方向的工具。
| Class | Styles |
|---|---|
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 将弹性项目水平排列，与文本方向一致：
<div class="flex flex-row ..."> <div>01</div> <div>02</div> <div>03</div></div>使用 flex-row-reverse 将弹性项目水平排列，方向相反：
<div class="flex flex-row-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>使用 flex-col 将弹性项目垂直排列：
<div class="flex flex-col ..."> <div>01</div> <div>02</div> <div>03</div></div>使用 flex-col-reverse 将弹性项目垂直排列，方向相反：
<div class="flex flex-col-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>Prefix a flex-direction utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="flex flex-col md:flex-row ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.