CSS-Layout: wann Flexbox und wann Grid einsetzen

Worum es geht

MDN beschreibt Flexbox als eindimensionales Layout-Modell: Ein Flex-Container ordnet seine Elemente entlang einer Hauptachse an (Zeile oder Spalte), verteilt freien Platz mit flex-grow, flex-shrink und flex-basis und kann mit flex-wrap in mehrere Zeilen umbrechen, wobei jede Zeile für sich angeordnet wird. Grid ist zweidimensional: grid-template-columns und grid-template-rows definieren Spuren (mit der Einheit fr, repeat() und minmax()), Elemente werden in Zellen oder benannte Bereiche platziert, und Inhalt, der nicht ins explizite Grid passt, erzeugt implizite Spuren. Beide teilen sich gap und die Box-Alignment-Eigenschaften wie align-items und justify-content.

Warum es wichtig ist

Die meisten Layout-Fehler – überlaufender Text, Spalten, die nie fluchten, oder Inhalt, der bei bestimmten Viewport-Breiten springt – entstehen durch das falsch gewählte Modell. Umgebrochene Flex-Zeilen richten Elemente nicht über Zeilen hinweg aus, sodass mit Flexbox gebaute Karten-Raster verrutschen. Grid mit festen Pixel-Spuren passt sich weder an Inhalt noch an schmale Bildschirme an.

So wird es angewendet

• Der Inhalt bestimmt die Grösse (Navigationsleisten, Button-Reihen, Tag-Listen, vertikales Zentrieren eines einzelnen Elements): Flexbox.
• Die Struktur bestimmt die Grösse (Seitengerüst mit Header, Sidebar und Hauptbereich; Formulare mit ausgerichteten Labels; Karten-Raster, bei denen Zeilen fluchten müssen): Grid.
• Responsives Karten-Raster ohne Media Queries: grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)).
• Flex-Elemente schrumpfen lassen: Ein Element schrumpft nur bis zu seiner Min-Content-Grösse, sodass lange, nicht umbrechbare Zeichenketten einen Überlauf erzwingen; bei solchen Elementen min-width: 0 (oder overflow-wrap: anywhere) setzen.
• gap für Abstände zwischen Elementen verwenden statt Margins an Kindelementen, die an den Rändern austreten.
• Frei verschachteln: Grid für die Seite, Flexbox innerhalb von Komponenten; das Ergebnis bei einer schmalen Handybreite und bei einer breiten Ansicht prüfen.

Stolpersteine

justify-content wirkt nur auf die Hauptachse; das Zentrieren in beide Richtungen braucht zusätzlich align-items, oder place-items: center auf einem Grid. Eine prozentuale Höhe an einem Flex-Kind braucht eine definierte Höhe am Elternelement. order und row-reverse ändern die visuelle Reihenfolge, nicht die DOM-Reihenfolge, der Tastaturfokus und Screenreader folgen, was die Navigation auf einer Seite verwirrend machen kann.