Flex Grow, Shrink, and Basis
Control how flex children expand or contract using flex-1, flex-none, grow, shrink, and basis-* utilities.
How Flex Children Size Themselves
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: The All-In-One Shorthand
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.
<!-- Two equal-width columns -->
<div class="flex gap-4">
<div class="flex-1 bg-blue-100 p-4 rounded">Left (50%)</div>
<div class="flex-1 bg-green-100 p-4 rounded">Right (50%)</div>
</div>
<!-- Three equal-width columns -->
<div class="flex gap-4 mt-4">
<div class="flex-1 bg-indigo-100 p-4 rounded">A (33%)</div>
<div class="flex-1 bg-indigo-200 p-4 rounded">B (33%)</div>
<div class="flex-1 bg-indigo-300 p-4 rounded">C (33%)</div>
</div>All lessons in this course
- Enabling Flex and Direction
- Justify Content and Align Items
- Flex Grow, Shrink, and Basis
- Wrapping and Gap