CSS Child / Layout as Intent

Alignment along the axis and alignment across it.

Two separate questions govern every arrangement, and separating them removes most of the confusion.

Every arrangement has a main direction: the direction the items are laid out in. There are always two independent alignment questions, and they are the source of most bewilderment because they get discussed as though they were one. The first is distribution along the main direction: given leftover room in the direction of flow, where does it go? Bunched at the start, at the end, in the middle, or shared out between the items in equal gaps? The second is alignment across the main direction: given items of differing sizes, do their tops line up, their bottoms, their centres, or do they all stretch to match the tallest?

The reason this feels harder than it is comes down to a naming problem. The direction of flow can be a row or a column, so along and across swap their real world meanings depending on which you chose, and instructions that read naturally in one arrangement read backwards in the other. The way through is to stop thinking in terms of horizontal and vertical entirely, and to think only in terms of along and across. Once the flow direction is decided, every alignment question resolves to one of those two, and the same reasoning applies whichever way the arrangement runs.

Centring is the famous example. It has a reputation as the hardest simple task in the field, and that reputation is mostly historical, because for years there was no direct way to express it and people used a sequence of workarounds. Today it is genuinely a matter of stating centred along and centred across, and the item sits in the middle of its container. If it does not, the container is almost certainly not the size you assumed it was, which is a size problem rather than an alignment problem, and worth checking before you change anything else.