One-dimensional arrangement.
WHAT IT DOES
Arranges items in a row or a column, distributing space between them.
WHAT IT SUITS
Navigation bars Rows of buttons Aligning items within a container Anything in a single direction
WHAT TO SET ON THE CONTAINER
The direction How items align along that direction How they align across it Whether they wrap The gap between them
WHAT TO SET ON ITEMS
Whether they grow, shrink or stay fixed Their order, where necessary
WHAT TO BE CAREFUL WITH
Changing visual order away from document order.
WHY
Keyboard navigation follows the document, and a mismatch is disorienting.
WHAT SOLVES MOST ALIGNMENT PROBLEMS
Centring, both horizontally and vertically, which was difficult before and is now straightforward.
WHAT TO USE FOR SPACING BETWEEN ITEMS
The gap property, rather than margins on children.
WHY
It does not add space outside the outermost items.
WHAT TO CHECK
Behaviour when content is longer than expected.
