Flexbox Alignment

Flexbox alignment is how you position a row (or column) of items with two properties instead of a pile of margins. justify-content moves them one way, align-items the other — and the whole game is knowing which way is which.

Where you meet it

Centering anything — the famous justify-content:center + align-items:center combo.
Navbars and toolbars: logo left, links right, everything vertically level.
Card grids and button rows that stay tidy at any screen width.

What it does

Once a container is display:flex, these two properties decide where the leftover space goes. They mostly don't resize your items — they distribute the gaps and line everything up, so you stop reaching for floats, margin:auto tricks, and absolute positioning.

Stop thinking horizontal vs vertical. Think main vs cross — because flex-direction can swap which is which.

How it works

A flex container has two axes. With the default flex-direction:row, the main axis runs horizontally (left to right) and the cross axis runs vertically. Each property owns one axis:

justify-content works along the main axis — sliding items left/right and spreading the gaps between them.
align-items works along the cross axis — lining items up top/middle/bottom.

.container {
  display: flex;
  justify-content: center;   /* main axis  → horizontal */
  align-items: center;       /* cross axis → vertical   */
}

Flip flex-direction to column and the axes swap: now justify-content moves things up/down and align-items moves them left/right. The properties don't change — the axes do.

Watch out

The space-* values only do something when there's free space left over. If items fill the row (or have flex-grow), there's nothing to distribute.
align-items:stretch is the default — items with no fixed cross-size grow to fill the container. Set a height (or another value) and they stop stretching.
Don't memorise "horizontal vs vertical" — memorise main vs cross. As soon as flex-direction changes, horizontal thinking breaks.

Go deeper

Flexbox-Ausrichtung positioniert eine Reihe (oder Spalte) von Items mit zwei Eigenschaften statt mit einem Haufen Margins. justify-content bewegt sie in die eine Richtung, align-items in die andere — und der ganze Trick ist zu wissen, welche Richtung welche ist.

Wo es vorkommt

Irgendetwas zentrieren — die berühmte Kombi justify-content:center + align-items:center.
Navbars und Toolbars: Logo links, Links rechts, alles vertikal auf einer Höhe.
Card-Grids und Button-Reihen, die bei jeder Bildschirmbreite ordentlich bleiben.

Was es tut

Sobald ein Container display:flex ist, entscheiden diese beiden Eigenschaften, wohin der übrige Platz geht. Sie verändern die Item-Größe meistens nicht — sie verteilen die Abstände und richten alles aus, sodass du dir Floats, margin:auto-Tricks und absolute Positionierung sparst.

Denk nicht horizontal vs. vertikal, sondern Haupt- vs. Querachse — denn flex-direction tauscht, welche welche ist.

Wie es funktioniert

Ein Flex-Container hat zwei Achsen. Bei der Voreinstellung flex-direction:row läuft die Hauptachse horizontal (links nach rechts), die Querachse vertikal. Jede Eigenschaft gehört zu einer Achse:

justify-content wirkt entlang der Hauptachse — schiebt Items nach links/rechts und verteilt die Lücken dazwischen.
align-items wirkt entlang der Querachse — richtet Items oben/mittig/unten aus.

.container {
  display: flex;
  justify-content: center;   /* Hauptachse → horizontal */
  align-items: center;       /* Querachse  → vertikal   */
}

Stellst du flex-direction auf column, tauschen die Achsen: jetzt bewegt justify-content die Items nach oben/unten und align-items nach links/rechts. Die Eigenschaften ändern sich nicht — die Achsen tun es.

Worauf achten

Die space-*-Werte tun nur etwas, wenn freier Platz übrig ist. Füllen die Items die Reihe (oder haben flex-grow), gibt es nichts zu verteilen.
align-items:stretch ist der Default — Items ohne feste Quer-Größe wachsen, bis sie den Container füllen. Setz eine Höhe (oder einen anderen Wert) und sie hören auf zu strecken.
Merk dir nicht "horizontal vs. vertikal", sondern Haupt- vs. Querachse. Sobald sich flex-direction ändert, fällt das Horizontal-Denken auseinander.