Flexbox CSS: Layout-Grundlagen erklärt

Das Wichtigste in Kürze:

• Flexbox ist ein etablierter CSS-Layoutmodus für eindimensionale Anordnungen, also entweder eine Zeile oder eine Spalte, und wird seit September 2015 breit von Browsern unterstützt.
• Mit der Eigenschaft display: flex auf einem Container werden dessen direkte Kindelemente automatisch zu Flex-Items, die sich entlang einer Hauptachse ausrichten lassen.
• Die Kurzschreibweise flex regelt Wachstum, Schrumpfung und Ausgangsgröße eines Elements und gehört zu den am häufigsten genutzten Flexbox-Eigenschaften überhaupt.
• Für Layouts mit gleichzeitig mehreren Zeilen und Spalten ist meist CSS Grid die passendere Wahl, da Flexbox konzeptionell auf eine Achse ausgelegt ist.

Wer sich mit modernem CSS-Layout beschäftigt, kommt an Flexbox nicht vorbei. Das Modul löst ein Problem, das Entwickler jahrelang mit Floats, Tabellen-Hacks oder absoluter Positionierung umschiffen mussten: Elemente flexibel in einer Zeile oder Spalte anzuordnen, ohne dass sich das Layout bei unterschiedlichen Inhaltslängen zerlegt.

Flexbox ist keine neue Technologie mehr, sondern ein fest etablierter Bestandteil jedes Frontend-Stacks. Trotzdem sorgen einzelne Eigenschaften, ihr Zusammenspiel und die Abgrenzung zu CSS Grid immer wieder für Unsicherheit. Dieser Überblick schafft Klarheit über die zentralen Konzepte, die wichtigsten Eigenschaften und die Frage, wann Flexbox tatsächlich die richtige Wahl ist.

Was Flexbox grundsätzlich leistet

CSS Flexible Box Layout, kurz Flexbox, verteilt verfügbaren Platz entlang einer Hauptachse und bietet zusätzlich Ausrichtungsmöglichkeiten für die Querachse dazu. Das klingt abstrakt, bedeutet in der Praxis aber Folgendes: Ein Container bekommt die Eigenschaft display: flex, und ab diesem Moment verhalten sich alle direkten Kindelemente wie Flex-Items. Sie lassen sich zentrieren, gleichmäßig verteilen, an den Rändern ausrichten oder proportional zueinander wachsen und schrumpfen lassen, ganz ohne manuelle Breitenberechnung.

Der entscheidende Unterschied zu älteren Layouttechniken liegt in der Flexibilität selbst. Statt feste Pixelbreiten zu definieren, beschreibt Flexbox Verhältnisse: Ein Element soll doppelt so viel Platz einnehmen wie ein anderes, oder ein Element soll so viel Raum wie nötig bekommen und der Rest soll sich gleichmäßig auf die übrigen verteilen. Diese relative Logik macht responsive Layouts erheblich einfacher, weil sich die Anordnung automatisch an verfügbaren Platz anpasst.

Die zentralen Eigenschaften im Überblick

Zwei Eigenschaften bestimmen das Grundverhalten eines Flex-Containers maßgeblich. flex-direction legt fest, ob Elemente als Zeile oder als Spalte angeordnet werden, und dreht damit effektiv die Hauptachse. flex-wrap steuert, ob Elemente in einer einzigen Zeile bleiben müssen oder bei Platzmangel in eine neue Zeile umbrechen dürfen.

Wichtig für das Verständnis von umbrechenden Layouts: Bei mehreren Flex-Zeilen wird der verfügbare Platz für jede Zeile separat verteilt. Das bedeutet, Elemente aus unterschiedlichen Zeilen müssen nicht zwangsläufig exakt untereinander ausgerichtet sein, selbst wenn sie zum gleichen Container gehören. Diese Besonderheit führt in der Praxis gelegentlich zu Überraschungen, wenn ein gitterartiges Aussehen erwartet wird, das Flexbox systembedingt nicht liefert.

Auf der Seite der Flex-Items selbst ist die Kurzschreibweise flex die mit Abstand wichtigste Eigenschaft. Sie bündelt drei Werte: wie stark ein Element wächst, wie stark es schrumpft und welche Ausgangsgröße es mitbringt, bevor überhaupt Wachstum oder Schrumpfung einsetzt. Diese Eigenschaft gilt als breit etabliert und funktioniert zuverlässig auf einer großen Zahl von Geräten und Browserversionen.

Abstände zwischen Elementen mit gap

Lange Zeit mussten Entwickler Abstände zwischen Flex-Items über Margins simulieren, was bei unregelmäßigen Umbrüchen schnell unschön wurde. Die Eigenschaft gap hat dieses Problem gelöst, indem sie einen sauberen, gleichmäßigen Abstand zwischen allen Flex-Items definiert, ohne dass Randelemente zusätzlichen Platz bekommen.

Die Browserunterstützung für gap in Flexbox-Kontexten wurde in Chrome 84, Edge 84, Firefox 63 und Safari 14.1 eingeführt. In der Summe ergibt das eine weltweite Unterstützung von rund 94 Prozent, was gap für die allermeisten Projekte zu einer sicheren Wahl macht. Wer noch sehr alte Browserversionen unterstützen muss, sollte die Eigenschaft testen, in der Praxis betrifft diese Einschränkung aber kaum noch relevante Nutzerzahlen.

Ausrichtung entlang der Achsen

Flexbox bietet differenzierte Möglichkeiten, Elemente sowohl entlang der Hauptachse als auch entlang der Querachse auszurichten. Darüber lassen sich klassische Layoutprobleme wie vertikale Zentrierung lösen, die mit älteren CSS-Techniken oft umständliche Workarounds erforderten.

Bei einzelnen Ausrichtungswerten wie start, end, left und right bestehen allerdings weiterhin Unterschiede zwischen Browsern und Einsatzkontexten. Diese Werte verhalten sich je nach Schreibrichtung des Dokuments und je nach Browser nicht immer identisch, weshalb sich ein Blick in aktuelle Kompatibilitätstabellen lohnt, bevor man sie in produktivem Code einsetzt. Für die gängigsten Anwendungsfälle wie Zentrieren oder gleichmäßiges Verteilen sind die etablierten Werte dagegen uneingeschränkt verlässlich.

Wann Flexbox die richtige Wahl ist

Flexbox ist für eindimensionale Layouts konzipiert, also für Anordnungen, bei denen Elemente entweder in einer Zeile oder in einer Spalte organisiert werden. Typische Einsatzfälle sind Navigationsleisten, Werkzeugleisten, Kartenreihen oder jede Komponente, bei der Elemente flexibel wachsen oder schrumpfen sollen.

Sobald ein Layout gleichzeitig Zeilen und Spalten exakt koordinieren muss, etwa bei einem komplexen Seitenraster mit mehreren Bereichen, die sowohl horizontal als auch vertikal aufeinander ausgerichtet sein müssen, ist CSS Grid das passendere Werkzeug. Die beiden Module ergänzen sich in der Praxis häufig: Grid übernimmt die große Seitenstruktur, Flexbox ordnet die Inhalte innerhalb einzelner Grid-Zellen an. Diese Kombination nutzt die jeweiligen Stärken beider Systeme, statt eines für Aufgaben zu zwingen, für die es nicht gedacht ist.

Häufige Fragen

Wann sollte ich Flexbox statt CSS Grid verwenden?

Flexbox eignet sich für eindimensionale Anordnungen, also Elemente in einer einzelnen Zeile oder Spalte. Sobald ein Layout feste Zeilen und Spalten gleichzeitig koordinieren muss, ist CSS Grid die geeignetere Wahl. In vielen Projekten kommen beide Module parallel zum Einsatz.

Funktioniert Flexbox in allen aktuellen Browsern?

Die grundlegende Flexbox-Unterstützung besteht in Browsern bereits seit September 2015 und gilt heute als breit etabliert. Einzelne neuere Werte, etwa bestimmte Ausrichtungsoptionen wie start oder end, zeigen jedoch noch kleinere Unterschiede zwischen Browsern.

Wie erzeuge ich gleichmäßige Abstände zwischen Flex-Items?

Die Eigenschaft gap erzeugt einen einheitlichen Abstand zwischen allen Flex-Items, ohne dass Randelemente zusätzlichen Platz erhalten. Sie wird von allen gängigen aktuellen Browsern unterstützt und ersetzt ältere Workarounds über Margins.

Was bewirkt die Kurzschreibweise flex an einem Element?

Sie legt in einem Schritt fest, wie stark ein Flex-Item wächst, wie stark es schrumpft und welche Ausgangsgröße es besitzt. Diese drei Werte bestimmen gemeinsam, wie sich ein Element bei unterschiedlichem verfügbarem Platz verhält.