Flexbox Basics

Flexbox is a layout method for arranging elements in a row or column, with easy control over spacing and alignment.

Turning on flexbox

Set display: flex on a container element — its direct children become "flex items" that line up in a row by default.

Try it yourself
Result

Justifying content

justify-content controls spacing along the main direction of the row:

Try it yourself
Result

Aligning items

align-items controls alignment across the opposite direction — useful for vertically centering items in a row. This example includes a fixed height on the container so you can see the effect:

Try it yourself
Result
PreviousTypography