flex-wrap

flex-wrap

用于控制 Flex 项目如何换行的实用工具。

类名样式

flex-nowrap

flex-wrap: nowrap;

flex-wrap

flex-wrap: wrap;

flex-wrap-reverse

flex-wrap: wrap-reverse;

示例

使用 flex-nowrap 阻止 Flex 项目换行，必要时导致不灵活的项目溢出容器

<div class="flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

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

<div class="flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

使用 flex-wrap-reverse 以相反方向换行 Flex 项目

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

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