Flexbox Drills: 32 Tiny Reps to Make It Stick
A self-contained practice page with 32 small flexbox exercises — justify-content, align-items, order, grow/shrink/basis, gap, and a few real-world layouts — each with a live CSS editor next to a target to match.
I keep relearning flexbox from scratch every few months, so I built a small drilling page instead of another cheat sheet: Flexbox Drills.
It’s 32 tiny exercises grouped by topic — justify-content, align-items, flex-direction, flex-wrap, order, flex-grow/shrink/basis, align-self, gap, and a handful of combined real-world layouts like a navbar and a centered box. Each card shows a target next to a live textarea — type CSS, watch the preview update, match the target, move on. No grading, just repetition until the properties stop feeling like guesswork.
It’s a single static HTML file with no build step, so it should keep working indefinitely.