Simple layouts

Left alone, a webpage stacks its boxes vertically, one under another, in the order you wrote them. That's why your page is currently one long column.

Sometimes that's exactly right. Often you want things side by side — three cards in a row, a photo beside some text, a navigation bar across the top.

To do that, you tell a container to lay its children out differently. The tool for this is called flexbox.

Put display: flex on a container and its children line up in a row instead of stacking.

Three properties do most of the work:

• display: flex — turn on the row behaviour
• gap — space between the children, without fiddling with margins
• justify-content — how they spread along the row: flex-start, center, space-between

The key thing to remember: you style the container, not the children. The parent decides how its children are arranged.