Flexbox 和 Grid
用于控制弹性项目方向的工具类。
| 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.