Flexbox

Part of the Full Stack Developer Roadmap.

Summary

A one-dimensional CSS layout system for arranging items in a row or column with powerful alignment and spacing controls — the workhorse of everyday UI layout.

How to Learn This

1Build a navbar and a card row using only Flexbox.
2Practice `justify-content`, `align-items` and `gap` until they're automatic.
3Use Flexbox for any layout that's fundamentally a single row or column.

Forms & Validation

Grid

More topics in HTML, CSS & JavaScript Essentials

Semantic HTML Forms & Validation Grid Responsive Design JavaScript Fundamentals DOM & Events Asynchronous JavaScript ES6+ Features Fetch API TypeScript Basics

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — free on the InsideEdge app.

Download