Sizing Flex Items
Flex items can grow to fill spare space, shrink when space runs out, and start from a chosen base size. The flex shorthand and its three parts — grow, shrink and basis — are what make flexbox layouts truly flexible.
flex-grow: sharing extra space
After items take their base size, any leftover space is shared in proportion to flex-grow. A value of 0 (the default) means "don't grow". Above, the "grow 2" item gets twice as much of the extra space as "grow 1" — not twice the total width.
flex-shrink: giving back space
When items don't fit, they shrink in proportion to flex-shrink (default 1). Setting it to 0 protects an item — useful for icons, avatars and buttons that must keep their size.
flex-basis: the starting size
flex-basis is the item's size along the main axis before growing or shrinking. auto uses the item's width (or content size); 0 ignores content size entirely.
The flex shorthand
| Shorthand | Means | Behaviour |
|---|---|---|
flex: initial | 0 1 auto | Default: content size, can shrink, won't grow |
flex: 1 | 1 1 0% | Equal shares of all space, regardless of content |
flex: auto | 1 1 auto | Grow and shrink from content size |
flex: none | 0 0 auto | Fixed at content size |
flex: 2 | 2 1 0% | Twice the share of flex: 1 items |
Always prefer the shorthand: it sets sensible values for the parts you don't mention.
Sidebar layout
Combining flex-wrap with a flex-basis gives a responsive layout without media queries: items sit side by side while there's room, and stack when there isn't.
align-self and order
align-self overrides the container's align-items for one item. order moves an item visually (lower numbers first) — but remember it doesn't change keyboard or reading order.
Preventing overflow: min-width: 0
Flex items won't shrink below their content's minimum size by default (min-width: auto). Long words or nowrap text then overflow. Setting min-width: 0 on the item lets it shrink, so ellipsis truncation works — one of the most useful flexbox fixes to remember.