Flex Wrap

Controls whether flex items should wrap onto multiple lines or be forced into a single line. This is essential for responsive design, allowing items to adapt to different screen sizes by either wrapping to new lines when space is limited or maintaining a single row or column. Flex wrap works with flex-direction to determine the layout behavior.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="flex flex-wrap gap-4">
  <div class="p-4 bg-blue-100 w-32">Item 1</div>
  <div class="p-4 bg-blue-200 w-32">Item 2</div>
  <div class="p-4 bg-blue-300 w-32">Item 3</div>
  <div class="p-4 bg-blue-400 w-32">Item 4</div>
  <div class="p-4 bg-blue-500 w-32">Item 5</div>
</div>

Examples

Items wrap to the next line when they run out of space

<div class="flex flex-wrap gap-4">
  <div class="p-4 bg-blue-100 w-32">Item 1</div>
  <div class="p-4 bg-blue-200 w-32">Item 2</div>
  <div class="p-4 bg-blue-300 w-32">Item 3</div>
  <div class="p-4 bg-blue-400 w-32">Item 4</div>
  <div class="p-4 bg-blue-500 w-32">Item 5</div>
</div>

Edit in playground

Items don't wrap but instead create a horizontal scrolling container

<div class="flex flex-nowrap overflow-x-auto gap-4 p-4 bg-gray-100">
  <div class="flex-shrink-0 p-4 bg-blue-100 w-32">Item 1</div>
  <div class="flex-shrink-0 p-4 bg-blue-200 w-32">Item 2</div>
  <div class="flex-shrink-0 p-4 bg-blue-300 w-32">Item 3</div>
  <div class="flex-shrink-0 p-4 bg-blue-400 w-32">Item 4</div>
  <div class="flex-shrink-0 p-4 bg-blue-500 w-32">Item 5</div>
  <div class="flex-shrink-0 p-4 bg-blue-600 w-32">Item 6</div>
  <div class="flex-shrink-0 p-4 bg-blue-700 w-32">Item 7</div>
</div>

Edit in playground

Tag cloud that wraps tags to multiple lines as needed

<!-- Tag/chip cloud that wraps -->
<div class="flex flex-wrap gap-2 max-w-lg">
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">HTML</div>
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">CSS</div>
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">JavaScript</div>
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">React</div>
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Tailwind CSS</div>
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Node.js</div>
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Express</div>
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">MongoDB</div>
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">GraphQL</div>
  <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">TypeScript</div>
</div>

Edit in playground

Responsive pattern: scrolling cards on mobile, wrapping grid on desktop

<!-- Horizontal scrolling cards vs wrapping cards based on screen size -->
<div class="md:flex md:flex-wrap flex flex-nowrap overflow-x-auto md:overflow-visible gap-4 pb-4">
  <div class="flex-shrink-0 md:flex-shrink w-64 md:w-1/3 lg:w-1/4 bg-white rounded-lg shadow-md overflow-hidden">
    <div class="h-32 bg-blue-300"></div>
    <div class="p-4">
      <h3 class="font-bold">Card 1</h3>
      <p class="text-gray-600">Cards scroll horizontally on mobile but wrap on desktop.</p>
    </div>
  </div>
  <!-- Repeat for multiple cards -->
  <div class="flex-shrink-0 md:flex-shrink w-64 md:w-1/3 lg:w-1/4 bg-white rounded-lg shadow-md overflow-hidden">
    <div class="h-32 bg-blue-400"></div>
    <div class="p-4">
      <h3 class="font-bold">Card 2</h3>
      <p class="text-gray-600">The layout changes based on screen size.</p>
    </div>
  </div>
  <div class="flex-shrink-0 md:flex-shrink w-64 md:w-1/3 lg:w-1/4 bg-white rounded-lg shadow-md overflow-hidden">
    <div class="h-32 bg-blue-500"></div>
    <div class="p-4">
      <h3 class="font-bold">Card 3</h3>
      <p class="text-gray-600">This is a responsive pattern for card layouts.</p>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Flex Wrap utility with different values

Open Interactive Playground

Variants

wrap: items wrap onto multiple lines when needed, wrap-reverse: items wrap onto multiple lines in reverse order, nowrap: items are forced into a single line (default)

wrapwrap-reversenowrap