CSS Flexbox: Layouts in einer Richtung

Kurz: Flexbox ordnet Elemente in einer Zeile oder Spalte an, verteilt freien Platz und richtet sie aus. Es ist das Standardwerkzeug für Menüs, Kartenreihen und zentrierte Inhalte.

Genauer: Man macht einen Container zur „Flex-Box” mit display: flex. Seine direkten Kinder werden zu Flex-Elementen und folgen den Regeln des Containers.

Im Detail

• Hauptachse: flex-direction: row (Standard) oder column. Die Querachse steht senkrecht dazu.
• Ausrichten: justify-content verteilt entlang der Hauptachse (flex-start, center, space-between, space-around). align-items richtet quer aus (stretch, center, flex-start).
• Abstand: gap: 1rem setzt Zwischenräume ohne Randtricks.
• Umbruch: flex-wrap: wrap lässt Elemente in die nächste Zeile umbrechen.
• Wachsen und Schrumpfen: flex: 1 lässt ein Element freien Platz füllen, flex: 0 0 200px gibt feste Breite. Ausgeschrieben: flex-grow, flex-shrink, flex-basis.
• Zentrieren: display:flex; justify-content:center; align-items:center; zentriert ein Kind waagerecht und senkrecht.
• Wann Grid? Für zweidimensionale Raster (Zeilen und Spalten zugleich) ist CSS Grid besser. Flexbox ist für eine Richtung gedacht.

Siehe auch: CSS, Media Queries