Part 17: Flex Wrap, Flex Grow, Flex Shrink & Flex Basis

When flex items exceed the container width, understanding how they wrap, expand, or shrink is vital.

1. Flex Wrap (flex-wrap)

By default, flex items try to squeeze onto a single line (flex-nowrap), which can cause overflow. Use flex-wrap so items wrap onto multiple lines:

<!-- Tag Pill Cloud -->
<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-slate-100 rounded-full text-sm">React</span>
  <span class="px-3 py-1 bg-slate-100 rounded-full text-sm">Tailwind CSS</span>
  <span class="px-3 py-1 bg-slate-100 rounded-full text-sm">TypeScript</span>
  <span class="px-3 py-1 bg-slate-100 rounded-full text-sm">Next.js</span>
  <span class="px-3 py-1 bg-slate-100 rounded-full text-sm">GraphQL</span>
</div>

2. Flex Grow & Flex Shrink

• grow (or flex-grow): Allows an item to expand to fill remaining space.
• grow-0: Prevents an item from growing.
• shrink-0: Crucial for avatars and icons! Prevents icons from squishing when text alongside them is long.

<div class="flex items-center gap-3">
  <!-- shrink-0 guarantees avatar stays circular even if text wraps -->
  <img src="/avatar.jpg" class="size-10 rounded-full shrink-0" alt="User" />
  <div class="grow min-w-0">
    <h4 class="font-bold truncate">Long user name that might overflow container</h4>
    <p class="text-sm text-slate-500">Active 2m ago</p>
  </div>
</div>

Key Takeaways

• Use flex-wrap for tag clouds and responsive grids.
• Always apply shrink-0 to icons and avatars next to flexible text.

In Part 18, we will explore Gap Utilities in Flexbox!