Tailwind CSS - Flex Wrap

Managing Content Flow with Flex Wrap

Flexbox is a powerful one-dimensional layout model. The flex-wrap utility is a fundamental part of Flexbox, controlling whether flex items are forced onto a single line or can wrap onto multiple lines as needed. This is crucial for creating responsive and fluid layouts.

Flex Wrap Utilities

Tailwind provides three primary classes to control the wrapping behavior of flex items.

Class	CSS Properties
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;

Controlling the Wrap Behavior

• flex-wrap: Allows flex items to wrap onto the next line if there isn’t enough space in the current line. The wrapping occurs in the same direction as the flex container.
• flex-nowrap: (Default behavior) Prevents items from wrapping. They will shrink to fit or overflow the container if they are too wide.
• flex-wrap-reverse: Allows items to wrap, but new lines are stacked in the reverse direction (e.g., from bottom to top in a standard row layout).

Responsive Wrapping in Action

The true power of flex-wrap is unleashed when combined with Tailwind’s responsive prefixes (sm:, md:, lg:). A common pattern is to have items wrap on small screens but form a single, scrollable line on larger screens.

Example 1: Responsive Product Category Tags

This example shows a list of tags. On small screens, they wrap naturally. On medium screens and up, they are forced into a single, horizontally scrollable line.

<!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>
    <!-- Container: flex, wraps by default, no-wrap on md+, horizontal scroll on 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>

Example 2: A Gallery of Cards

Using flex and flex-wrap is a simple and effective way to create a responsive grid of items that reflows based on available space.

<!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>
    <!-- The flex container will wrap its children -->
    <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>

Pro-Tip: Flex Wrap vs. Grid

When should you use flex-wrap instead of CSS Grid? A good rule of thumb:

• Use Flexbox (flex-wrap) when you have a set of items and you want them to flow and wrap based on their intrinsic content size. It excels at distributing space along a single axis.
• Use CSS Grid when you need a strict, two-dimensional layout where items must align in both rows and columns, regardless of their content size. It’s better for overall page layouts.