Flexbox 和 Grid
flex-wrap
用于控制弹性子项换行的工具。
| 类 | 样式 |
|---|---|
flex-nowrap | flex-wrap: nowrap; |
flex-wrap | flex-wrap: wrap; |
flex-wrap-reverse | flex-wrap: wrap-reverse; |
示例(Examples)
不要换行(Don't wrap)
使用 flex-nowrap 防止弹性子项换行，如果必要的话，会导致不灵活的子项溢出容器：
🌐 Use flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
01
02
03
<div class="flex flex-nowrap"> <div>01</div> <div>02</div> <div>03</div></div>正常换行(Wrap normally)
使用 flex-wrap 允许弹性项目换行：
🌐 Use flex-wrap to allow flex items to wrap:
01
02
03
<div class="flex flex-wrap"> <div>01</div> <div>02</div> <div>03</div></div>换行(Wrap reversed)
使用 flex-wrap-reverse 以相反方向封装弹性项目：
🌐 Use flex-wrap-reverse to wrap flex items in the reverse direction:
01
02
03
<div class="flex flex-wrap-reverse"> <div>01</div> <div>02</div> <div>03</div></div>响应式设计(Responsive design)
在 flex-wrap 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="flex flex-wrap md:flex-wrap-reverse ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。