Flexbox: Endlich sauber nebeneinander
Jahrzehntelang war "zwei Kästen nebeneinander" in CSS erstaunlich schwer und wurde mit Tabellen, Floats und anderen Verrenkungen gelöst. Flexbox hat das beendet: Ein Container verteilt seine Kinder entlang einer Achse, flexibel, zentrierbar, umbruchfähig. Für Navigationsleisten, Button-Reihen und Kartenzeilen ist es heute das Standardwerkzeug.
Das Grundprinzip
CSS-Code
.leiste {
display: flex;
gap: 12px; /* Abstand zwischen den Kindern */
justify-content: space-between; /* Verteilung auf der Achse */
align-items: center; /* Ausrichtung quer dazu */
}Nur der Container bekommt display: flex, die Kinder ordnen sich automatisch nebeneinander an. justify-content regelt die Verteilung entlang der Hauptachse (Werte wie flex-start, center, space-between), align-items die Ausrichtung quer dazu. Und gap setzt Abstände zwischen den Kindern, ganz ohne margin-Gefummel.
Der berühmteste Anwendungsfall: Zentrieren
.mitte {
display: flex;
justify-content: center;
align-items: center;
}Etwas horizontal und vertikal zu zentrieren war früher ein Running Gag der Webentwicklung. Mit Flexbox sind es zwei Zeilen. Wenn CSS je einen Volksfeiertag bekommt, dann wegen dieser beiden Zeiln.
Umbruch und flexible Größen
.kartenreihe {
display: flex;
flex-wrap: wrap; /* darf umbrechen */
}
.karte {
flex: 1 1 250px; /* wachsen, schrumpfen, Wunschbreite */
}Mit flex-wrap: wrap brechen Kinder in die nächste Zeile um, wenn der Platz ausgeht, die halbe Miete für mobiltaugliche Layouts. Die Kurzform flex am Kind regelt, ob es wachsen und schrumpfen darf und von welcher Basisgröße es ausgeht. Mit flex-direction: column kippt die ganze Achse ins Senkrechte, praktisch fürs Stapeln auf schmalen Bildschirmen zusammen mit Media Queries.
Flexbox oder Grid?
Faustregel: Flexbox denkt in einer Reihe (auch wenn sie umbricht), Grid denkt in Zeilen und Spalten gleichzeitig. Menüleiste: Flexbox. Komplettes Seitenraster: Grid. Beide vertragen sich bestens und werden ständig kombinirt.