Flexbox & Grid
用于控制弹性项目如何换行的实用工具。
类 | 样式 |
---|---|
flex-nowrap | flex-wrap: nowrap; |
flex-wrap | flex-wrap: wrap; |
flex-wrap-reverse | flex-wrap: wrap-reverse; |
使用 flex-nowrap
来防止弹性项目换行,必要时会导致不灵活的项目溢出容器
<div class="flex flex-nowrap"> <div>01</div> <div>02</div> <div>03</div></div>
使用 flex-wrap
来允许弹性项目换行
<div class="flex flex-wrap"> <div>01</div> <div>02</div> <div>03</div></div>
使用 flex-wrap-reverse
来反向换行弹性项目
<div class="flex flex-wrap-reverse"> <div>01</div> <div>02</div> <div>03</div></div>
前缀a flex-wrap
实用工具 带有像 md:
这样的断点变体,仅在中等 屏幕尺寸及以上时应用该实用工具
<div class="flex flex-wrap md:flex-wrap-reverse ..."> <!-- ... --></div>
在变体文档中了解更多关于使用变体的信息。