Frontend · interactive
Flexbox: how space is shared
Each item asks for its flex-basis. If the row has room left over, flex-grow decides who gets it. If it's too narrow, flex-shrink decides who gives up space, weighted by size. Drag the container width.
Container 800px · 220px left over
nav
main
aside
| item | basis | grow | shrink | final |
|---|---|---|---|---|
| nav | 120 | 0 | 1 | 120px (+0) |
| main | 300 | 2 | 1 | 447px (+147) |
| aside | 160 | 1 | 2 | 233px (+73) |
220px spare: split 2:1 between main and aside; nav has grow 0 and stays at 120.
1 2 Leftover space is split in proportion to grow. Grow 0 means “never get bigger”.
main gets 2 shares, aside 1, nav none.
3 4
In production
Tools and technologies
Flexbox is the default for one-dimensional layout in every browser.
Not tied to one language — use these names when you search docs or design a system.