Flex Wrap

By default, flex items try to fit on a single line. Flex wrap lets them break onto multiple lines when they run out of room. This is essential for building card grids, tag lists, and any layout where items need to flow naturally.

Wrap options

<!-- No wrap: items stay on one line (default) -->
<div class="flex flex-nowrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Wrap: items wrap to next line -->
<div class="flex flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
    

Tag list pattern

A classic use case is a list of tags or badges that wrap to the next line based on available space.

<div class="flex flex-wrap gap-2">
  <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">JavaScript</span>
  <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">React</span>
  <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Tailwind</span>
  <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Node.js</span>
  <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">TypeScript</span>
</div>
    

Card grid with wrap

Combine flex wrap with gap for a simple card grid that works at any screen size.

<div class="flex flex-wrap gap-6">
  <div class="w-full sm:w-1/2 lg:w-1/3 bg-white rounded-lg shadow p-6">
    <h3 class="font-bold text-lg">Card 1</h3>
  </div>
  <div class="w-full sm:w-1/2 lg:w-1/3 bg-white rounded-lg shadow p-6">
    <h3 class="font-bold text-lg">Card 2</h3>
  </div>
  <div class="w-full sm:w-1/2 lg:w-1/3 bg-white rounded-lg shadow p-6">
    <h3 class="font-bold text-lg">Card 3</h3>
  </div>
</div>