flex-grow, flex-shrink, flex-basis: the three that actually matter
Every flexbox question on Stack Overflow eventually comes down to the same three properties. flex-grow decides how leftover free space is split. flex-shrink decides who gives up space when the container is too small. flex-basis is the starting size before either of those kicks in. Everything else is derived.
The algorithm, not the syntax
The W3C spec lays it out as an algorithm: compute each item's hypothetical main size from flex-basis, then either distribute free space by flex-grow ratios or subtract overflow by flex-shrink-weighted ratios. Writing flex: 1 on three children means each gets a third of the available space — not because the browser is guessing, but because 1 / (1+1+1) is a third.
The basis is where people get confused
flex-basis: auto means "use the item's intrinsic main size" (its width for a row, height for a column). flex-basis: 0 means "pretend the item has zero size before distributing." That difference is why flex: 1 1 auto and flex: 1 1 0 produce visibly different layouts when children have different content lengths. Rachel Andrew's MDN article "Controlling ratios of flex items along the main axis" is the shortest write-up that explains this cleanly.
flex-shrink is usually fine at 1
Most real-world bugs come from flex-grow, not flex-shrink. The default flex-shrink: 1 is almost always what you want: items shrink proportionally when the container narrows. Setting flex-shrink: 0 is how you say "this item never shrinks" — useful for logos, icons, and fixed-width sidebars. Heydon Pickering's Every Layout (2020) uses exactly this pattern for its Sidebar component.
The shorthand's secret default
Writing flex: 2 does not just set flex-grow: 2. It expands to flex: 2 1 0%. The shorthand resets flex-basis to 0% so growth ratios apply cleanly. Writing flex-grow: 2 alone leaves flex-basis at auto, which produces different results. The CSS-Tricks Almanac entry for flex flags this as the single most common source of "why does my layout look weird" questions.