Wrapping and Gap
Handle overflow with flex-wrap and flex-nowrap, and use gap-* utilities for consistent space between flex items.
Flex Overflow: The Default Behavior
By default, flex containers use flex-nowrap — all flex items are forced onto a single line, even if they overflow the container's width. The browser will compress flex items as much as possible before allowing overflow. This is the desired behavior for navbars and single-row layouts, but for card grids and tag lists, you typically want items to wrap onto multiple lines when they run out of room.
<!-- No wrap: items overflow when too many -->
<div class="flex w-64 bg-gray-100 p-2">
<div class="bg-blue-400 p-2 m-1">Item 1</div>
<div class="bg-blue-400 p-2 m-1">Item 2</div>
<div class="bg-blue-400 p-2 m-1">Item 3</div>
<div class="bg-blue-400 p-2 m-1">Item 4</div>
</div>flex-wrap: Enabling Multi-Line Layout
flex-wrap tells flex children to wrap onto a new line when they run out of horizontal space. Each line is an independent flex row. This is essential for tag clouds, card grids, and chip groups where the number of items is variable or unknown. Once wrapping is enabled, items naturally reflow as the container grows or shrinks.
<!-- Tags that wrap to new lines -->
<div class="flex flex-wrap gap-2">
<span class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-medium">JavaScript</span>
<span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium">Python</span>
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">TypeScript</span>
<span class="bg-pink-100 text-pink-700 px-3 py-1 rounded-full text-sm font-medium">React</span>
<span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm font-medium">Vue</span>
<span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium">Angular</span>
</div>