Flex Grow, Shrink, and Basis

By default, flex children are sized according to their content. But Flexbox provides three properties that give you fine control over how children fill available space: flex-grow controls how much extra space a child claims, flex-shrink controls how much it compresses when space is tight, and flex-basis sets the initial size before growing or shrinking. Tailwind exposes all three with concise utility classes.

flex-1 is the most commonly used flex sizing utility. It applies flex: 1 1 0% — grow to fill available space, shrink when necessary, and start from a zero basis. In practice, flex-1 makes each item claim an equal share of the remaining container space. Two flex-1 siblings each take 50%; three take 33% each.

flex-auto applies flex: 1 1 auto — it grows and shrinks but starts from the element's natural content size. Unlike flex-1 which starts from zero, flex-auto preserves the size difference between items before distributing extra space proportionally. Use it when you want content-aware distribution rather than equal splits.

flex-initial applies flex: 0 1 auto — the browser default. Items do not grow beyond their content size (grow: 0), but they will shrink if space is tight (shrink: 1). This is used to explicitly state the default in a context where sibling items use flex-1, keeping the initial item sized to its content while siblings take up remaining space.

flex-none applies flex: none — the item will neither grow to fill extra space nor shrink when space is limited. The item always remains exactly its natural content size. Use flex-none for icons, avatars, badges, and fixed-width elements that should maintain their size regardless of how much space is available in the flex container.

For fine-grained control, Tailwind provides separate grow, grow-0, shrink, and shrink-0 utilities. grow allows the item to grow (flex-grow: 1). grow-0 prevents growth. shrink allows shrinking (flex-shrink: 1). shrink-0 prevents shrinking — useful for preventing images and icons from being compressed when the container is too narrow.

basis-* sets the initial size of a flex item before growing or shrinking. It maps to CSS flex-basis. You can use Tailwind spacing values (basis-4 = 16px), percentage values (basis-1/2 = 50%), or keyword values (basis-full = 100%). Setting basis-1/3 on three siblings with grow creates a three-column layout that starts at equal thirds and fills available space.

basis-0 and basis-auto produce subtly different results when combined with grow. With basis-0, all items start at zero width and grow purely based on their flex-grow ratios — resulting in equal space allocation. With basis-auto, items first claim their content width, then extra space is distributed — resulting in content-proportional allocation.

A classic two-panel layout uses flex-none w-64 on the sidebar (fixed 256px width) and flex-1 on the main content area (takes everything else). This creates a sidebar that never grows or shrinks combined with a content area that fills 100% of remaining space. It is the foundation of dashboard and admin UI layouts.

Combining flex flex-wrap with flex-1 and a min-w-* constraint creates a responsive grid that automatically adjusts the number of columns based on available width. Each card takes at least min-w-64 width, and they expand to fill the row with flex-1. When a card cannot fit, it wraps to the next line — no explicit breakpoint management needed.

Tailwind's order-* utilities change the visual display order of flex items without changing their DOM order. order-first moves an item to the beginning, order-last moves it to the end, and order-1 through order-12 provide granular control. This is useful for responsive reordering: a sidebar that appears after content on mobile can be moved visually before it on desktop with md:order-first.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: flex-1 makes children claim equal shares of available space, flex-none prevents an item from growing or shrinking so it stays at its natural size, and grow, shrink, and basis-* provide granular control over each dimension separately. Next up we handle overflow with flex-wrap and create consistent gaps between flex items.