← HTML & CSS learning pathHTML & CSS · Module 7 of 10
Flexbox layout
Arrange items in a row or column and align them easily with flexbox.
📖 Key ideas
- display: flex on a parent makes its children flex items.
- flex-direction: row (default) or column.
- justify-content aligns along the main axis (start, center, space-between).
- align-items aligns on the cross axis (center, stretch).
- gap adds space between items; flex-wrap lets them wrap.
💡 Real-life example: Flexbox is like arranging books on a shelf: push them left, centre them, or spread them evenly.
display: flexTurns on flex layout
justify-contentAligns on the main axis
align-itemsAligns on the cross axis
gapSpace between items