Flexbox
Flexbox ordnet Elemente entlang einer Achse an — eine Reihe oder eine Spalte. Es ist das Werkzeug für Navigationsleisten, Button-Gruppen, Karten nebeneinander, Zentrieren. Der Trick: du denkst in Hauptachse und Querachse.
Zwei Rollen: der display: flex Container steuert die Anordnung, justify-content verteilt entlang der Hauptachse, align-items entlang der Querachse. Dreht flex-direction auf column, vertauschen sich die beiden.
Playground
Hauptachse: horizontal ↔
1
2
3
4
flex-direction
justify-content (Hauptachse)
align-items (Querachse)
flex-wrap
CSSdein aktuelles Layout
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 10px;
}Das wichtigste Rezept: zentrieren
Die berühmteste Flexbox-Anwendung — etwas exakt mittig setzen, beide Achsen:
CSS
.center {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertikal */
}Warum eigentlich? — Warum war Zentrieren früher so schwer — und jetzt nicht mehr?
Vor Flexbox musste man vertikales Zentrieren mit Tricks erschlagen: line-height, absolute Positionierung plus negative margins, Tabellen-Hacks. Alle zerbrechlich. Flexbox macht aus „vertikal zentrieren" eine Eigenschaft (align-items: center), weil der Container die Größe seiner Kinder kennt und den Raum aktiv verteilt. Das ist der Kern: Flexbox verhandelt Platz, statt ihn starr zuzuweisen.
Häufiger Denkfehler — justify und align verwechseln
Der häufigste Flexbox-Frust: justify-content wirkt auf die Hauptachse, align-items auf die Querachse — und die Hauptachse hängt an flex-direction. Bei row zentriert justify-content horizontal; bei column plötzlich vertikal. Wenn deine Zentrierung „in die falsche Richtung" geht, hast du fast immer eine column-direction übersehen.
Tiefer rein — flex-grow, flex-shrink, flex-basis
Die Eigenschaften an den Kindern steuern, wie sie Platz teilen:
- flex-grow: 1 — „nimm dir freien Platz". Ein Kind mit grow 1 dehnt sich, der Rest bleibt.
- flex-shrink — wie stark darf ein Kind schrumpfen, wenn der Platz knapp wird (Default 1).
- flex-basis — die Ausgangsgröße vor dem Wachsen/Schrumpfen.