The three flex components
The flex shorthand on a flex item combines three values that govern its size along the main axis. They work together once the container computes free or overflowing space.
- flex grow is how greedily an item takes leftover free space.
- flex shrink is how willingly it gives up size when space is tight.
- flex basis is the starting size before growing or shrinking.
How the algorithm distributes space
The container first lays items at their basis, then sums them. If there is leftover space, it shares the surplus in proportion to each grow factor. If items overflow, it removes space in proportion to each shrink factor weighted by basis.
- A grow of zero means an item never expands.
- A shrink of zero means an item refuses to contract and may overflow.
- A basis of auto falls back to the width or content size.
The common shorthand flex one means grow one, shrink one, basis zero, which makes items split space evenly regardless of content. Using flex auto keeps content size as the starting point.
Key idea
Flex basis sets the starting size, grow shares surplus space, and shrink removes deficit, so the shorthand tunes how items breathe along the main axis.