flex-wrap

控制弹性项目如何换行的实用工具。

快速参考

为flex布局父容器属性。

使用 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>

使用断点变体（例如 md:）作为 flex-wrap 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

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

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

flex-direction

控制弹性项目排列方向的实用工具。

flex

控制弹性项目如何伸缩的实用工具。