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.
Die Einzelkämpfer-Eigenschaften
Neben den Container-Eigenschaften gibt es welche für einzelne Kinder, die zwei nützlichsten:
.werkzeugleiste {
display: flex;
gap: 8px;
}
.werkzeugleiste .rechts {
margin-left: auto; /* schiebt sich und alles danach nach rechts */
}
.karte {
flex: 1; /* alle Karten gleich breit wachsen lassen */
}Das margin-left: auto ist der berühmte Trick für "Logo links, Login rechts" in einer Leiste: Der automatische Außenabstand frisst allen freien Platz und drückt den Rest an den Rand. Und flex: 1 an den Kindern verteilt die Breite gleichmäßig, das Rezept für ebenbürtige Spalten und Buttons in einer Reihee.
Wann kippt die Richtung?
Mit flex-direction: column arbeitet dieselbe Maschinerie senkrecht, Hauptachse ist dann von oben nach unten, und justify-content und align-items tauschen gedanklich die Rollen. Genau das passiert im mobilen Menü dieses Wikis: dieselbe Liste, am Desktop als Zeile, unter 720 Pixeln als Spalte, umgeschaltet mit einer einzigen Eigenschaft in einer Media Query.