Flexbox — Roadmap Step & Resources
One-dimensional layouts with flexbox: main/cross axis, justify-content, align-items, flex-grow/shrink
- Level: beginner
- Estimated time: 2 days
- Roadmap: Next.js Full Stack
Before this step
Mini projects
- Build a responsive navbar
- Build a card layout with flexbox
Interview questions
- Flexbox vs Grid — when to use which?
- What does flex: 1 mean?
Study resources
- Learn Flexbox in 15 Minutes (Video) — Web Dev Simplified's iconic Flexbox video — regularly cited by learners as the tutorial that finally made Flexbox click.
- A Complete Guide to Flexbox (Article) — CSS-Tricks' legendary, endlessly-bookmarked visual reference for every Flexbox property.
- Basic Concepts of Flexbox (Article) — MDN guide to primary axes, flex-direction, align-items, and justify-content fundamentals.
- Flexbox Froggy Game (Article) — Interactive, beloved game for mastering CSS Flexbox alignment and axis properties through play.
Part of
- CSS — section
- Next.js Full Stack roadmap — the full learning path