flex-wrap

用于控制 flex 项目如何换行的工具类。

快速参考

类	属性
flex-nowrap	flex-wrap: nowrap;
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;

示例

不换行

使用 flex-nowrap 阻止 flex 项目换行；必要时，不可伸缩的项目会溢出容器：

01

02

03

<!-- [!code classes:flex-nowrap] -->
<div class="flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

正常换行

使用 flex-wrap 允许 flex 项目换行：

01

02

03

<!-- [!code classes:flex-wrap] -->
<div class="flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

反向换行

使用 flex-wrap-reverse 让 flex 项目沿相反方向换行：

01

02

03

<!-- [!code classes:flex-wrap-reverse] -->
<div class="flex flex-wrap-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

响应式设计

使用 md: 等断点变体作为 flex-wrap 工具类的前缀，即可只在中等屏幕尺寸及以上生效：

<div class="flex flex-wrap md:flex-wrap-reverse ...">
 <!-- ... -->
</div>

在变体文档中了解有关使用变体的更多信息。