Tailwind CSS - 弹性换行

使用 Flex Wrap（弹性换行）管理内容流

Flexbox 是一种强大的一维布局模型。flex-wrap (弹性换行) 工具类是 Flexbox 的一个基本组成部分，它控制 flex 项目是被强制排成一行，还是可以根据需要换行到多行。这对于创建响应式和流畅的布局至关重要。

Flex Wrap 工具类

Tailwind 提供了三个主要的类来控制 flex 项目的换行行为。

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

控制换行行为

• flex-wrap：如果当前行空间不足，允许 flex 项目换行到下一行。换行方向与 flex 容器的方向相同。
• flex-nowrap：(默认行为) 阻止项目换行。它们将收缩以适应容器，或者在过宽时溢出容器。
• flex-wrap-reverse：允许项目换行，但新行会以相反方向堆叠（例如，在标准行布局中从下到上堆叠）。

响应式换行实战

flex-wrap 的真正强大之处在于与 Tailwind 的响应式前缀 (sm:、md:、lg:) 结合使用。一种常见的模式是让项目在小屏幕上换行，但在大屏幕上形成一个可滚动的单行。

示例 1：响应式产品类别标签

此示例展示了一个标签列表。在小屏幕上，它们自然换行。在中等屏幕及以上，它们被强制显示为单行，并可水平滚动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Responsive Flex Wrap</title>
</head>
<body class="bg-slate-100 p-8 font-sans">
  <div class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow">
    <h3 class="text-lg font-semibold text-slate-800 mb-4">Browse Categories</h3>
    <!-- 容器：flex，默认换行，md+ 屏幕上不换行，md+ 屏幕上水平滚动 -->
    <div class="flex flex-wrap md:flex-nowrap md:overflow-x-auto gap-3">
      <a href="#" class="flex-shrink-0 bg-sky-100 text-sky-800 font-semibold px-4 py-1.5 rounded-full hover:bg-sky-200 transition-colors">Electronics</a>
      <a href="#" class="flex-shrink-0 bg-amber-100 text-amber-800 font-semibold px-4 py-1.5 rounded-full hover:bg-amber-200 transition-colors">Home & Garden</a>
      <a href="#" class="flex-shrink-0 bg-emerald-100 text-emerald-800 font-semibold px-4 py-1.5 rounded-full hover:bg-emerald-200 transition-colors">Fashion</a>
      <a href="#" class="flex-shrink-0 bg-rose-100 text-rose-800 font-semibold px-4 py-1.5 rounded-full hover:bg-rose-200 transition-colors">Health & Beauty</a>
      <a href="#" class="flex-shrink-0 bg-indigo-100 text-indigo-800 font-semibold px-4 py-1.5 rounded-full hover:bg-indigo-200 transition-colors">Toys & Hobbies</a>
      <a href="#" class="flex-shrink-0 bg-slate-100 text-slate-800 font-semibold px-4 py-1.5 rounded-full hover:bg-slate-200 transition-colors">Automotive</a>
    </div>
    <p class="text-sm text-slate-500 mt-4">Resize your browser to see the tags wrap or scroll.</p>
  </div>
</body>
</html>

示例 2：卡片画廊

使用 flex 和 flex-wrap 是创建基于可用空间自动重排的响应式项目网格的简单有效方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Flex Wrap Card Gallery</title>
</head>
<body class="bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 mb-6">Featured Products</h2>
    <!-- flex 容器将对其子元素进行换行 -->
    <div class="flex flex-wrap gap-6 justify-center">
      <!-- Card 1 -->
      <div class="w-64 bg-white rounded-lg shadow-md p-4 flex flex-col items-start">
        <div class="w-full h-32 bg-gray-200 rounded-md mb-4"></div>
        <h3 class="font-semibold text-gray-800">Premium Widget</h3>
        <p class="text-gray-500 text-sm mt-1">High-quality, durable widget.</p>
        <span class="mt-4 text-xl font-bold text-gray-900">$99.99</span>
      </div>
      <!-- Card 2 -->
      <div class="w-64 bg-white rounded-lg shadow-md p-4 flex flex-col items-start">
        <div class="w-full h-32 bg-gray-200 rounded-md mb-4"></div>
        <h3 class="font-semibold text-gray-800">Standard Gizmo</h3>
        <p class="text-gray-500 text-sm mt-1">Reliable and affordable.</p>
        <span class="mt-4 text-xl font-bold text-gray-900">$49.99</span>
      </div>
      <!-- Card 3 -->
      <div class="w-64 bg-white rounded-lg shadow-md p-4 flex flex-col items-start">
        <div class="w-full h-32 bg-gray-200 rounded-md mb-4"></div>
        <h3 class="font-semibold text-gray-800">Eco-Friendly Gadget</h3>
        <p class="text-gray-500 text-sm mt-1">Made from 100% recycled materials.</p>
        <span class="mt-4 text-xl font-bold text-gray-900">$79.99</span>
      </div>
    </div>
  </div>
</body>
</html>

专业提示：Flex Wrap 与 Grid 的选择

何时使用 flex-wrap 而不是 CSS Grid？一个好的经验法则是：

• 当您有一组项目，并且希望它们根据其固有内容大小进行流式布局和换行时，请使用 Flexbox (flex-wrap)。它擅长沿单一轴线分配空间。
• 当您需要严格的二维布局，即项目必须在行和列中对齐，无论其内容大小如何时，请使用 CSS Grid。它更适用于整体页面布局。