CSS Flexbox: Stop Fighting Your Layouts

This course is for a developer who already writes basic HTML and CSS — you can set color, padding, and width, and style a simple page — but Flexbox still feels like guesswork. You set justify-content and the thing moves the wrong way; you reach for align-items and nothing happens. The fix is not memorizing more properties. It is one mental model: a flex container has two axes, and every alignment property is just "which axis, which direction." Once you see the axes, the properties stop being a coin flip.

By the end you'll be able to (course objectives):

• Explain what display: flex does and which elements become flex items.
• Point to the main axis and the cross axis for any flex container, and predict which property controls which.
• Center anything horizontally and vertically without trial and error.
• Flip the main axis with flex-direction and know why justify-content then moves items the other way.
• Distribute leftover space with flex-grow / flex-shrink / flex-basis and read the flex shorthand.
• Build a real, wrapping nav bar and card row with flex-wrap and gap.

Prerequisites: You can write basic HTML (elements, nesting, classes) and set simple CSS properties. No CSS Grid, no prior Flexbox vocabulary, and no build tools or terminal wizardry are assumed.

Practice environment: You use your own editor and browser — this course has no embedded sandbox for the exercises. The lessons include live in-browser sandboxes for the guided moments, but every exercise points at a real .html file you open yourself.

Lessons

Sources listed in sources.md.