flex-grow, flex-shrink, and flex-basis

## The three longhands Every flex item has three sizing longhands that the `flex` shorthand sets together: - **`flex-grow`** — a unitless proportion saying how much of the container's *leftover* main-axis space this item absorbs. `0` means "take none of it". - **`flex-shrink`** — a unitless proportion saying how much of a *deficit* this item absorbs when the items together are too big for the line. `0` means "never shrink me". - **`flex-basis`** — the item's starting size on the main axis, before any growing or shrinking. It is a length, a percentage, or the keyword `auto`. "Main axis" means the direction items flow: horizontal in the default `flex-direction: row`, vertical in `column`. So `flex-basis` is a starting width in a row and a starting height in a column. ## What the shorthand does with one value This is the part that surprises people. When you write `flex` with a single unitless number, the shorthand sets *all three* longhands, not just grow: ```css .item { flex: 2; } /* equivalent to */ .item { flex-grow: 2; flex-shrink: 1; flex-basis: 0%; } ``` The omitted `flex-basis` in the shorthand defaults to `0%`, **not** to `auto`. That zero is what makes `flex: 1` the "equal columns" idiom: if every item starts from a base size of zero, then *all* of the container's main size is free space, and items with equal grow factors split it equally regardless of how much text each contains. That also means `flex: 1` and `flex-grow: 1` are not interchangeable. `flex-grow: 1` on its own leaves `flex-basis` at its initial `auto`, so items start at their content size and only the *leftover* is shared equally — the items end up unequal. ```css .a > * { flex: 1; } /* base 0 -> equal widths */ .b > * { flex-grow: 1; } /* base auto -> content size + equal share of leftovers */ ``` ## The four named forms | Shorthand | Expands to | Behaviour | | --- | --- | --- | | `flex: 1` (any single number `n`) | `n 1 0%` | Fully flexible from a zero base; equal grow factors give equal sizes | | `flex: auto` | `1 1 auto` | Grows and shrinks, but starts from `width`/content, so bigger content stays bigger | | `flex: none` | `0 0 auto` | Completely inflexible; sized by `width` or content and left alone | | `flex: initial` | `0 1 auto` | Won't grow into free space, but will shrink to avoid overflow | `flex: initial` is worth memorising for a second reason: it is the **default state of every flex item**. An item you never touched behaves as `flex-grow: 0; flex-shrink: 1; flex-basis: auto`. That single fact explains two of the most common flex surprises at once: items don't fill the container by default (grow is `0`), and items *do* get squeezed below their declared `width` by default (shrink is `1`). You can also write two values. `flex: 1 200px` means `flex-grow: 1; flex-shrink: 1; flex-basis: 200px` — a number plus a length sets grow and basis and leaves shrink at `1`. Two numbers, `flex: 1 0`, set grow and shrink and reset basis to `0%`. ## Why the zero basis is spelled `0%` The specification defines the one-value form as resetting `flex-basis` to zero; browsers serialise it as `0%`. In a row-direction container the difference between `0` and `0%` is not observable for the sizing math — both mean "start from nothing" — so treat `flex: 1` as `1 1 0` when reasoning about layout. One detail that does matter: `flex-basis` obeys `box-sizing` like any other sizing property. Under the default `content-box`, `flex: 1` gives a *content* base of zero, and the item's padding and border are still added on top, so "equal" items are only truly equal when their padding and borders match — or when the container sets `box-sizing: border-box`. ## Choosing between them - Want columns that end up the same size no matter what is inside them? `flex: 1`. - Want items to keep their natural proportions but still fill the row? `flex: auto`. - Want a logo, an icon, or a fixed sidebar that neither stretches nor gets squeezed? `flex: none` (or `flex: 0 0 240px` to pin an exact size). - Want the default? Write nothing; that is `flex: initial`. When you need something the named forms don't cover, spell out all three values — `flex: 0 1 320px` reads unambiguously and is what most style guides prefer over remembering shorthand defaults.