Flexbox ist ein Layoutverfahren für eine Richtung: Elemente in einer Reihe oder Spalte verteilen, ausrichten und wachsen lassen.
- Flexbox
Layoutverfahren, das die Kinder eines Containers entlang einer Achse anordnet, verteilt und ausrichtet.
Beispiel: „Flexbox denkt in einer Richtung, ein Raster in zweien.“Auch: Flexibles Layout.
Die beiden Achsen
MDN beschreibt es so: The main axis is defined by flex-direction, und die Querachse runs perpendicular to the main axis. Bei row verläuft die Hauptachse waagerecht, bei column senkrecht. Mit der Richtung tauschen auch die Ausrichtungseigenschaften ihre Wirkung.
Verteilen und ausrichten
justify-content verteilt entlang der Hauptachse, align-items richtet auf der Querachse aus. Der Anfangswert von align-items ist stretch, weshalb Kinder von sich aus gleich hoch werden. Genau das macht Flexbox für Kartenreihen so praktisch.
Wann Flexbox, wann Grid
Flexbox, wenn eine Richtung zählt und die Größen vom Inhalt abhängen: eine Navigationsleiste, eine Reihe von Knöpfen, eine Kopfzeile. Grid, wenn Zeilen und Spalten zugleich zählen.