❮ Previous Next ❯

Advanced Flex Utilities

  • Use grow, shrink, basis and wrap utilities.

  • Why Advanced Flex Utilities Matter

    Basic Flexbox handles:

    • Direction

    • Alignment

    • Spacing

    Advanced Flex utilities handle:

    • How much space an item takes

    • How items compete for space

    • How layouts adapt dynamically

    In real applications:

    • Sidebars expand/shrink

    • Content areas grow naturally

    • Buttons don’t collapse

    • Layouts remain usable at all sizes

    In Tailwind CSS, these behaviors are controlled using simple, readable utilities.

    The Flex Sizing Trio

    Flex item size is determined by three properties working together:

    1. flex-grow → Can the item grow ?

    2. flex-shrink → Can the item shrink ?

    3. flex-basis → What is the starting size ?

    Understanding these three removes all Flexbox confusion.

    flex-grow

    What is flex-grow ?

    flex-grow defines how much a flex item can grow when extra space is available.

    In simple terms:

    Who gets the extra space ?

    Tailwind Utilities for flex-grow

    ClassCSS Applied
    growflex-grow: 1
    grow-0flex-grow: 0

Flex Grow

grow allows the element to expand and take available space inside the flex container. 

<div class="flex">
  <div class="grow bg-blue-200 p-4">Flexible</div>
  <div class="bg-green-200 p-4">Fixed</div>
</div>

  • Result:

    • Blue box expands

    • Green box stays content-sized

Multiple Flex Grow Items

grow lets multiple items expand equally to fill the available space. 

<div class="flex">
  <div class="grow bg-blue-200 p-4">Item 1</div>
  <div class="grow bg-green-200 p-4">Item 2</div>
</div>

  • Result:

    • Space is shared equally

    flex-shrink

    What is flex-shrink ?

    flex-shrink defines whether an item can shrink when space is limited.

    In simple terms:

    Who is allowed to get smaller ?

    Tailwind Utilities for flex-shrink

    ClassCSS Applied
    shrinkflex-shrink: 1
    shrink-0flex-shrink: 0

Prevent Flex Shrink

shrink-0 prevents the element from shrinking when space inside the flex container becomes limited. 

<div class="flex">
  <img class="w-24 shrink-0" src="logo.png" />
  <p class="ml-4">
    This text can shrink, but the image will not.
  </p>
</div>

  • Used for:

    • Icons

    • Avatars

    • Buttons

    • Logos

Flex Shrink Behavior

shrink allows an item to reduce its size, while shrink-0 prevents it from shrinking. 

<div class="flex w-64">
  <div class="w-40 shrink bg-blue-200">Shrinkable</div>
  <div class="w-40 shrink-0 bg-red-200">Fixed</div>
</div>

  • Result:

    • Blue item shrinks

    • Red item maintains width

    flex-basis

    What Is flex-basis ?

    flex-basis defines the initial size of a flex item before grow or shrink happens.

    Think of it as:

    The starting width or height

    Tailwind Utilities for flex-basis

    ClassCSS Applied
    basis-autoauto
    basis-full100%
    basis-1/250%
    basis-1/333.33%
    basis-1/425%

Flex Basis

basis-* sets the initial size of a flex item before grow or shrink behavior is applied. 

<div class="flex">
  <div class="basis-1/3 bg-blue-200 p-4">One Third</div>
  <div class="basis-2/3 bg-green-200 p-4">Two Thirds</div>
</div>

  • This creates proportional layouts easily.

    How Grow, Shrink & Basis Work Together

    This is the most important section.

    Flex sizing logic:

    1. Start with flex-basis

    2. If extra space → apply flex-grow

    3. If not enough space → apply flex-shrink

Combined Flex Grow, Shrink and Basis

basis-64 sets initial width, shrink-0 prevents shrinking, and grow lets the main content expand. 

<div class="flex">
  <aside class="basis-64 shrink-0 bg-gray-200 p-4">
    Sidebar
  </aside>
  <main class="grow bg-white p-4">
    Main content grows
  </main>
</div>

  • Behavior:

    • Sidebar stays fixed

    • Main content fills remaining space

    This is a classic dashboard layout.

    The flex-1 Shortcut

Flex Utility

flex-1 is a shorthand that lets a flex item grow and fill the remaining space inside the container. 

<div class="flex-1"></div>

  • This equals:

    flex: 1 1 0%;

    Meaning:

    • Can grow

    • Can shrink

    • Starts at zero

Flex Equal Width Items

flex-1 makes both items grow equally to fill the available space. 

<div class="flex">
  <div class="flex-1 bg-blue-200 p-4">Flexible</div>
  <div class="flex-1 bg-green-200 p-4">Flexible</div>
</div>
  • Most layouts use flex-1 instead of separate utilities.

Flex Sizing

Uses flex-1, grow, and shrink-0 to control layout behavior in navbars and cards. 

<!-- Navbar Layout -->
<div class="flex items-center">
  <span class="shrink-0">Logo</span>
  <nav class="flex-1 text-center">Menu</nav>
  <button class="shrink-0">Login</button>
</div>

<!-- Card with Footer -->
<div class="flex flex-col h-64">
  <div class="grow">Content</div>
  <div class="shrink-0">Footer</div>
</div>

  • Common Mistakes

    • Not understanding shrink behavior

    • Using fixed widths instead of basis

    • Forgetting shrink-0 on images

    • Overusing flex-1 everywhere

    • Expecting grow to work without available space

    Flexbox sizing only works when space exists to distribute.

    Best Practices for Advanced Flex Utilities

    • Use grow for flexible areas

    • Use shrink-0 for icons and controls

    • Use basis-* for proportional layouts

    • Prefer flex-1 for simple equal layouts

    • Combine utilities intentionally

❮ Previous Next ❯