Flexbox: align-items & justify-content

Flexbox richtet Elemente in einem Container entlang zwei Achsen aus: Hauptachse (main axis) und Querachse (cross axis). Welche Richtung die Hauptachse hat, bestimmst du mit flex-direction.

Merksatz: justify-content richtet entlang der Hauptachse aus, align-items richtet entlang der Querachse aus.

justify-content (Hauptachse)

Steuert, wie freier Platz entlang der Hauptachse verteilt wird. Du siehst den Effekt besonders, wenn der Container größer ist als die Items.

• flex-start: am Anfang
• center: in der Mitte
• flex-end: am Ende
• space-between: erster am Anfang, letzter am Ende, dazwischen gleichmäßig
• space-around: gleichmäßig, außen „halber“ Abstand
• space-evenly: überall exakt gleich (auch außen)

align-items (Querachse)

Steuert die Ausrichtung der Items quer zur Hauptachse. Damit der Effekt sichtbar ist, braucht der Container quer zur Achse „Platz“ (bei row meist eine Höhe, bei column meist eine Breite).

• stretch (Standard): streckt in der Querachse (wenn Items keine feste Gegen-Größe haben)
• flex-start: oben/links
• center: mittig
• flex-end: unten/rechts
• baseline: richtet Text-Grundlinien aus (gut bei unterschiedlichen Schriftgrößen)

Häufige Stolperfallen

• „Es passiert nichts“: meist fehlt freier Platz (Container nicht größer als Items).
• stretch wirkt nicht: Items haben feste Höhe/Breite und können nicht gestreckt werden.
• Mehrere Zeilen (wrap): align-items betrifft Items in einer Zeile, die Verteilung mehrerer Zeilen regelt align-content.

Kurz-Spickzettel: justify-content = Hauptachse · align-items = Querachse · flex-direction dreht die Achsen mit