Flexbox essentials

The two axes

display: flex turns an element into a flex container and lays its children (the flex items) along the main axis. By default the main axis runs left-to-right, so flex-direction: row is implied. Switch to flex-direction: column and the main axis runs top-to-bottom instead.

The cross axis is always perpendicular to the main axis. This is the single most important thing to internalise: justify-content aligns items along the main axis, while align-items aligns them along the cross axis. Flip flex-direction and those two properties swap which way they push.

Distributing space on the main axis

justify-content decides what happens to the free space along the main axis. flex-start (the default) packs items at the start; center pools the space at both ends; space-between pushes the first and last items to the edges and spreads the rest evenly; space-around and space-evenly distribute the gaps differently. Reach for space-between whenever you want a logo on the left and a menu on the right.

Aligning on the cross axis

align-items positions items along the cross axis. stretch (the default) makes every item fill the container's cross size — that is why flex items become equal height for free. center is the classic "vertically centre this" answer, and flex-start / flex-end pin items to one edge. Set align-self on a single item to opt it out of the container's choice.

Growing, shrinking, and the gap

The flex shorthand controls how an item resizes. flex: 1 means "grow to fill the leftover space, share it equally"; the longhands are flex-grow, flex-shrink, and flex-basis (the item's starting size before growing or shrinking). Use modern gap for spacing between items instead of margins — it never adds an edge margin and collapses cleanly when items wrap. Add flex-wrap: wrap and items flow onto new lines once they run out of room.