3 Flex Wrap 弹性换行

响应式团队卡片 示例 3a

上述示例在桌面屏幕尺寸下表现良好。然而，当你尝试将输出面板的大小调整为移动设备屏幕大小时，就会发现出现水平滚动条，或者布局在某些方面出现错乱。那么，如何让这些元素在小屏幕上像这样自动换行到下一行呢？

比如展示团队成员信息时：

解决方案

你可以这样操作：在容器元素上添加另一个类flex-wrap 。

<div class="container flex justify-around flex-wrap">
  <div class="team-profile">...</div>
  <!--> Three more team profiles <-->
</div>

Working Demo

理解 Flex Wrap（弹性换行）概念

flex-wrap实用类会在空间不足时让弹性项目换行。默认行为是不换行，这就是子项不会自动移动到下一行的原因。

Tailwind 类名	CSS 属性及值	解释
flex-wrap	flex-wrap: wrap;	必要时，项目会换行到下一行
flex-nowrap	flex-wrap: nowrap;	即使会导致溢出，项目也不换行
flex-wrap-reverse	flex-wrap: wrap-reverse;	项目以相反方向换行

让我们看另一个例子。

Logo 的换行 示例 3b

假设你需要在一行中展示一些客户的 Logo，Logo 之间以及周围要有间距，并且希望它们在小屏幕上具有响应性。你可以使用 justify-around 来设置间距，并使用 flex-wrap 类让 Logo 换行。

前三个 Logo 由Gokul提供。

Try it out

解决方案
<div class="logos flex justify-around flex-wrap">
  <img ... />
  <img ... />
  <img ... />
  <img ... />
</div>

Working Demo

试试使用 flex-wrap-reverse，看看有什么不同。