Stage 1 · Lesson 6 of 9
Flexbox
lays out the children of a box in one direction, either a row or a column. The container sets the direction. justify-content spaces items along that direction, which is called the .
align-items places them across it, and gap adds space between them. Each child can grow, shrink and have a starting size with the flex property, so flex: 1 means share the leftover space equally. Flexbox suits one dimensional things: a navigation bar, a row of buttons, a card whose footer sticks to the bottom, or centring something in a box.
Common trapguessing: learn which axis each property works on, and use the flex overlay to see it, instead of trying values until it looks right.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- CourseFreeThe Odin Project
The Odin Project · Beginner
Foundations course: HTML, CSS and the web built in your own editor, not a sandbox
- GuideFreeweb.dev
Google · Intermediate
Free Learn HTML, Learn CSS and Learn Accessibility courses explain the why behind layout