Flexbox 和 Grid
flex-wrap
用于控制弹性项目如何换行的工具。
类 | 样式 |
---|---|
flex-nowrap | flex-wrap: nowrap; |
flex-wrap | flex-wrap: wrap; |
flex-wrap-reverse | flex-wrap: wrap-reverse; |
示例(Examples)
¥Examples
不要换行(Don't wrap)
¥Don't wrap
使用 flex-nowrap
来防止 flex 项目封装,导致不灵活的项目在必要时溢出容器:
¥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)
¥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)
¥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)
¥Responsive design
在 flex-wrap
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="flex flex-wrap md:flex-wrap-reverse ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。