Layout in one direction
Navigation bars, button rows, a card's header with a title on the left and an icon on the right — that's one-dimensional layout, and Flexbox makes it easy.
Container and items
- display: flex — children line up in a row (the main axis).
- flex-direction: column — stack them vertically instead.
- gap — space between items. Much easier than margins.
- justify-content — spread along the main axis: flex-start, center, space-between, flex-end.
- align-items — align across it: stretch (default), center, flex-start.
- flex: 1 on an item — let it grow to fill leftover space.