CSS Flexbox erklärt: Der komplette Leitfaden zum Flex-Layoutmodell, zur Ausrichtung und zu Gaps

Sie setzen display: flex auf einen Container, und drei Boxen reihen sich in einer Zeile auf. Dann funktioniert justify-content: center, align-items: center tut etwas Unerwartetes, ein langes Wort sprengt das ganze Layout, und Ihre Elemente schrumpfen mysteriös, obwohl Sie es nie verlangt haben. Flexbox ist der meistgenutzte Layoutmodus in CSS und der am meisten missverstandene, weil er mit einem Denkmodell daherkommt — Achsen —, das nichts davor hatte. Hat dieses Modell einmal Klick gemacht, wird die ganze Eigenschaftsliste offensichtlich. Diese Anleitung baut es von Grund auf.

Die zwei Achsen: Haupt- und Querachse

Jedes Flex-Layout hat zwei Achsen, und jede Flex-Eigenschaft ist gegen eine von ihnen definiert. Diese eine Tatsache klärt den Großteil der Verwirrung:

Hauptachse — die Richtung, entlang der die Elemente fließen. Gesteuert durch flex-direction.
Querachse — die senkrechte Richtung.

flex-direction: row (der Standard) macht die Hauptachse horizontal — Elemente sitzen in einer Linie von links nach rechts — und die Querachse vertikal. flex-direction: column tauscht sie: Elemente stapeln von oben nach unten, und die Querachse ist horizontal.

Die Konsequenzen:

justify-content verteilt Elemente entlang der Hauptachse.
align-items positioniert Elemente entlang der Querachse.

Das ist der klassische Vertauscher: Menschen erwarten, dass align-items: center horizontal zentriert, weil „align“ drinsteckt. Es zentriert vertikal in einem Zeilenlayout. Finden Sie je, dass eine Eigenschaft „nicht funktioniert“, fragen Sie zuerst: Auf welcher Achse wirkt sie, und ist das die Achse, die ich meine?

Der Container und seine Elemente

display: flex verwandelt das Element in einen Flex-Container, und seine direkten Kinder werden Flex-Elemente. Zwei Dinge folgen daraus:

Nur direkte Kinder sind Flex-Elemente. Ein Enkel bleibt ein normaler Block, sofern sein eigener Elternteil nicht ebenfalls ein Flex-Container ist — weshalb echte Layouts Flex-Container verschachteln.
Container und Elemente haben getrennte Eigenschaftsmengen. Container-Eigenschaften (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) steuern die Anordnung; Element-Eigenschaften (flex-grow, flex-shrink, flex-basis, align-self, order, margin) steuern Bemaßung und Position des Elements selbst.

Die Hauptachse: Richtung, Verteilung, Umbruch, Gap

Richtung. flex-direction akzeptiert row, row-reverse, column, column-reverse. row und column sind die beiden, die Sie nutzen werden; die -reverse-Varianten spiegeln Start- und Endpunkte.

Verteilung. justify-content entscheidet, was mit dem freien Platz entlang der Hauptachse geschieht:

flex-start / flex-end — Elemente drängen zum Start- oder Endrand (Standard ist flex-start).
center — in der Mitte gruppiert.
space-between — kein Platz an den Enden, gleicher Platz zwischen den Elementen.
space-around — gleicher Platz auf beiden Seiten jedes Elements (die Enden bekommen einen halben Gap).
space-evenly — überall gleicher Platz, einschließlich der Enden.

Umbruch. Standardmäßig zwingt flex-wrap: nowrap jedes Element auf eine Zeile, was heißt: Elemente schrumpfen oder laufen über. flex-wrap: wrap lässt Elemente auf zusätzliche Zeilen fließen, wenn der Platz ausgeht — der wesentliche Schalter für responsive Reihen von Karten oder Badges.

Gap. gap (mit row-gap und column-gap für jede Achse) setzt Abstand zwischen Elementen. Es ersetzt die alten Margin-und-nth-child-Hacks und wirkt im Gegensatz zu Margins nie doppelt an den Rändern.

Die Querachse: align-items, align-content, align-self

align-items positioniert Elemente entlang der Querachse. Sein überraschender Standard ist stretch: Ein Flex-Element dehnt sich, um die Quergröße des Containers zu füllen, sofern nicht seine eigene width/height (oder align-self) etwas anderes sagt. Deshalb zeigt sich der klassische Fehler — align-items: center an einem Container, dessen Elemente nicht zentrieren — oft als Elemente, die doch zentrieren, aber erst, nachdem man den Stretch berücksichtigt. Weitere Werte: flex-start, flex-end, center und baseline (richtet die Textgrundlinien von Elementen unterschiedlicher Höhe aus — nützlich für Buttonreihen oder Formularlabels).

align-content sieht wie ein Geschwister aus, wirkt aber nur, wenn Elemente auf mehrere Zeilen umbrechen. Es verteilt die Zeilen selbst entlang der Querachse. Haben Sie eine Zeile von Elementen, tut es nichts — eine häufige Quelle der Verwirrung „warum zentriert das nicht?“.

align-self überschreibt align-items für ein einzelnes Element — praktisch, wenn ein Element in einer Reihe unten hängen soll, während der Rest zentriert.

Die Elemente bemaßen: flex-grow, flex-shrink, flex-basis

Drei Element-Eigenschaften entscheiden, wie groß jedes Element auf der Hauptachse tatsächlich wird:

flex-basis — die Startgröße des Elements auf der Hauptachse, bevor irgendein Wachsen oder Schrumpfen. auto (der Standard) nutzt width/height oder Inhaltsgröße. 0 bedeutet „starte bei nichts, bemaße mich ganz aus Grow-Anteilen.“
flex-grow — gibt es übrig gebliebenen Platz, nachdem alle Elemente ihre Basis genommen haben, wird er unter den Elementen im Verhältnis ihrer Grow-Werte verteilt. Standard 0 (nicht wachsen).
flex-shrink — übersteigt die Gesamtbasis den Container, schrumpfen Elemente im Verhältnis ihrer Shrink-Werte. Standard 1.

Der Standard flex-shrink: 1 ist der Grund, warum Elemente „schrumpfen, obwohl Sie es nicht verlangt haben“: Jeder Flex-Container mit festbreiten Kindern, die überlaufen, komprimiert sie still. Zwei Wege, es zu stoppen: flex-shrink: 0 oder die Kurzform flex: none.

Die Kurzform bündelt alle drei: flex: 1 bedeutet 1 1 0% (gleich wachsen, Schrumpfen erlaubt, Basis ignorieren), flex: auto bedeutet 1 1 auto (gleich wachsen, aber Inhaltsgröße respektieren), flex: none bedeutet 0 0 auto (nie wachsen oder schrumpfen). flex: 2 wächst doppelt so schnell wie flex: 1-Geschwister.

Noch ein Stolperstein: Ein Flex-Element weigert sich, unter seine min-content-Größe zu schrumpfen (min-width: auto), sofern Sie nicht min-width: 0 setzen. Ein langes ungebrochenes Wort oder ein riesiges Bild in einem Flex-Element läuft daher über den Container, egal was Sie schrumpfen — die Lösung ist min-width: 0 (oder overflow: hidden) am Element.

Die klassischen Fehler

justify-content und align-items vertauscht. Fragen Sie, auf welcher Achse Sie sind. In einer row ist horizontal justify-content und vertikal align-items; in einer column kippen beide.
„Vertikale Zentrierung funktioniert nicht.“ Sie zentrieren entlang der Querachse einer Zeile — nutzen Sie align-items: center, nicht justify-content: center.
„Warum schrumpft mein Element?“ flex-shrink: 1 ist der Standard. Fixieren Sie flex-shrink: 0 oder nutzen Sie flex: none.
„Mein Text läuft über und ich kann es nicht beheben.“ min-width: auto verhindert Schrumpfen unter die Inhaltsbreite; setzen Sie min-width: 0 am betroffenen Element.
Margins für Abstand. Nutzen Sie gap; es ist das dafür gebaute Werkzeug.
Der Zentrier-Einzeiler. margin: auto an einem Flex-Element absorbiert allen freien Platz, weshalb ein einzelnes Element mit margin: auto sich auf beiden Achsen selbst zentriert — der klassische „Button perfekt zentrieren“-Trick ganz ohne Flex-Eigenschaften.

Echte Layouts bauen: Flex verschachteln

Flex glänzt in kleinen Kompositionen. Ein Navigations-Header ist ein Container mit justify-content: space-between (Logo links, Links rechts) plus align-items: center und einem gap zwischen den Links. Eine Toolbar ist eine Reihe von Elementen mit align-items: center. Eine Karte mit Icon und zwei Textzeilen ist ein column-Flex-Container mit gap dazwischen. Und für eine Zwei-Spalten-Seitenschale „Sidebar + Inhalt“ können Sie die Inhaltsspalte flex: 1 geben, sodass die Sidebar ihre Breite behält und der Hauptbereich den Rest absorbiert.

Für alles, wo das Layout in zwei Dimensionen zugleich ausgerichtet sein muss — ein Seitengerüst, ein Raster aus Karten, das Zeilen und Spalten in Übereinstimmung bringt —, wird Flexbox unbeholfen. Das ist die Aufgabe von CSS Grid: Grid definiert Zeilen und Spalten im Voraus, während Flexbox eine Achse gleichzeitig auslegt. Eine übliche Architektur nutzt Grid für das Seitengerüst und Flexbox in jeder Zelle für die feinkörnige Ausrichtung, und die beiden ergänzen sich wunderbar.

Kurzreferenz

flex-direction setzt die Hauptachse (row = horizontal, column = vertikal); die Querachse ist senkrecht.
justify-content wirkt auf der Hauptachse; align-items auf der Querachse.
align-items: stretch ist der Standard — Elemente füllen die Quergröße, sofern nicht anders gesagt.
flex-wrap: wrap + gap = responsive Reihen ohne Margin-Hacks.
flex-basis = Startgröße, flex-grow = Anteil am übrigen Platz, flex-shrink = wie schnell komprimiert wird. flex: 1 = 1 1 0%, flex: none = 0 0 auto.
Elemente schrumpfen standardmäßig (flex-shrink: 1) und weigern sich, unter die Inhaltsgröße zu schrumpfen (min-width: auto) — fixieren Sie eines von beiden, wenn es beißt.
Eine Achse gleichzeitig → Flexbox. Zwei Dimensionen → Grid.

Wollen Sie ein Flex-Layout lieber visuell entwerfen, lässt Sie der CSS-Flexbox-Generator Ausrichtungs- und Größenoptionen ziehen und kopiert das fertige CSS — und der CSS-Grid-Generator tut dasselbe für Grid.