The Flexbox Alignment Guide I Wish I Had Sooner
Flexbox alignment confuses everyone at first. Here is the mental model that finally made justify-content, align-items, and align-self click for me. Flexbox alignment took me years to feel confident with. The problem was not the syntax. it was that I kept confusing which axis each property acted on. The breakthrough came when I stopped memorizing property names and started thinking in terms of main axis and cross axis. The Two Axes Every flex container has a main axis and a cross axis. The main axis is the direction content flows, determined by flex-direction. The cross axis is perpendicular to it. Every alignment property targets one of these two axes. never both. Here is insight: justify-content aligns along the main axis. align-items aligns along the cross axis. That is it. If your items are in a row (the default), justify-content controls horizontal distribution and align-items controls vertical. If you switch to flex-direction: column, the axes swap and so do the properties. .toolbar { display: flex; flex-direction: row; /* main axis is horizontal */ justify-content: space-between; /* distributes along main axis (horizontal) */ align-items: center; /* aligns along cross axis (vertical) */ gap:…