Flex utilities map directly to CSS: flex, flex-col, flex-wrap, items-center, justify-between, gap-4. Prefer gap-* over margin on every child—no first/last edge bugs.
Common patterns
- Toolbar:
flex items-center justify-between gap-4 - Media object:
flex items-start gap-3 - Centered empty state:
flex min-h-[200px] items-center justify-center
Important interview questions and answers
- Q: Flex or grid for a card grid?
A: Grid when you need aligned rows and columns; flex when items flow in one direction (toolbars, chip lists). - Q: Why gap over margin-between hacks?
A: Gap only spaces between items, avoids collapsing issues, and stays readable in utility markup.
Self-check
- Which utilities center content on both axes?
- What is the cross axis when
flex-colis active?
Challenge
Toolbar layout
- Build a header with
flex items-center justify-between. - Add a third nav link and confirm space distribution.
Done when: links stay on opposite ends with vertically centered items.