Flexbox fundamentals — one-dimensional layout

Flexbox exists to answer one question well: given a row (or column) of items and some available space, how should that space be distributed among them? It's deliberately one-dimensional — it reasons about a single axis at a time, which is exactly what makes it the right tool for a toolbar, a nav bar, or a row of buttons, and the wrong tool for a full page grid with both rows and columns that need to align together (that's the next lesson's job).

Every flex property aligns items along one of exactly two axes, and which physical direction each axis points depends entirely on flex-direction. justify-content always controls the main axis (the direction items flow in); align-items always controls the cross axis (perpendicular to that). This is the single fact that resolves most flexbox confusion: justify-content: center centers horizontally in a row but vertically in a column — not because the property changed meaning, but because the main axis itself rotated 90 degrees.

flex-basis sets an item's starting size before any extra/missing space gets distributed. flex-grow is a ratio, not a fixed amount: an item with flex-grow: 1 next to one with flex-grow: 2 doesn't get "1 unit" of space — it gets exactly half as much of the leftover space as its neighbor, however much leftover space there actually is. flex-shrink works the same way in reverse, for when items don't all fit. The shorthand flex: 1 (equivalent to flex: 1 1 0%) is the common "take up all available space, splitting evenly with siblings that also say flex: 1" pattern — a sidebar-plus-main-content layout, exactly as shown above, is one of flexbox's most common real uses.

Before gap was supported inside flex containers, spacing items evenly required margin tricks that had to specifically exclude the last child (otherwise there'd be unwanted trailing space) — a small but real source of off-by-one styling bugs. gap sets spacing between items directly on the flex container, with no such exception needed, and it's now supported in every current browser, making the old margin-exclusion pattern effectively obsolete for new code.