Quiz Entry - updated: 2026.07.14
What does the flex-basis property control?
flex-basis sets an item's starting size along the main axis — the baseline that flex-grow and flex-shrink then adjust up or down.
Think of it as the "ideal" or initial size each item asks for, before the container decides whether there's spare space to grow into or a shortfall to shrink away.
| Value | Meaning |
|---|---|
auto |
Falls back to the item's own width/height property |
content |
Sizes to fit the item's content |
<length> |
A specific size, e.g. 35% or 200px |
#parent { display: flex; flex-flow: row wrap; }
/* Every item starts out asking for 35% of the row */
#parent div { flex-basis: 35%; }
How to picture it: flex-basis is the negotiating starting point. The browser hands out (or claws back) space from there according to each item's flex-grow and flex-shrink factors.