CSS Flexbox ist der schnellste Weg, Elemente in einer Reihe oder Spalte sauber anzuordnen – ohne float-Gefrickel und ohne unzählige Margin-Tricks. Wer Layouts baut, kommt an Flexbox nicht vorbei.
In diesem Guide lernst du Flexbox von Grund auf: das Achsen-Modell, die wichtigsten Eigenschaften und drei fertige Layouts, die du direkt kopieren kannst. Am Ende verstehst du nicht nur, was du tippst, sondern warum es funktioniert.
Das Wichtigste in Kürze
display: flexauf dem Eltern-Element macht alle direkten Kinder zu flexiblen Items.- Es gibt zwei Achsen: die Hauptachse (Richtung der Items) und die Querachse (90° dazu).
justify-contentverteilt entlang der Hauptachse,align-itemsentlang der Querachse.gapsetzt sauberen Abstand,flex-wraperlaubt Umbrüche,flexsteuert Wachsen und Schrumpfen.- Flexbox ist für eine Dimension (Reihe ODER Spalte) – für Raster in zwei Dimensionen nimmst du CSS Grid.
Was ist CSS Flexbox – und wozu brauchst du es?
Flexbox (offiziell „Flexible Box Layout“) ist ein CSS-Layoutmodul, das speziell dafür gemacht wurde, eine Gruppe von Elementen entlang einer Linie zu verteilen. Du sagst dem Container, in welche Richtung seine Kinder fließen sollen, wie der Platz dazwischen verteilt wird und wie sie sich ausrichten – den Rest erledigt der Browser.
Bevor es Flexbox gab, hat man Spalten mit float oder display: inline-block gebaut. Beides ist fummelig: vertikales Zentrieren war ein Albtraum, gleich hohe Spalten ein Hack. Mit Flexbox sind genau diese Aufgaben ein Einzeiler. Typische Einsätze:
- Navigationsleisten (Logo links, Menü rechts)
- Karten-Reihen, die sich gleichmäßig den Platz teilen
- Inhalte horizontal und vertikal mittig zentrieren
- Buttons, Icons und Text auf einer Linie ausrichten
So startest du: display:flex
Flexbox aktivierst du immer auf dem Container (dem Eltern-Element), nicht auf den Items. Eine einzige Zeile reicht:
.container {
display: flex;
}Ab jetzt liegen alle direkten Kinder von .container standardmäßig nebeneinander in einer Reihe. Das war's für den Anfang. Alle weiteren Eigenschaften verfeinern nur noch, wie diese Reihe sich verhält.
So sieht das aus: drei Boxen, die sich automatisch den Platz teilen – das ist gerendertes Flexbox, kein Bild.
Das Herzstück: Hauptachse und Querachse
Wenn du nur eine Sache aus diesem Guide mitnimmst, dann diese: Flexbox denkt in zwei Achsen. Verstehst du die, ergeben alle Eigenschaften sofort Sinn.
Die Richtung, in der deine Items fließen. Bei
flex-direction: row läuft sie horizontal von links nach rechts.Steht immer 90° zur Hauptachse. Bei einer Reihe läuft sie also vertikal (oben nach unten).
Der Clou: flex-direction dreht die Hauptachse. Setzt du column, läuft die Hauptachse plötzlich vertikal – und die Querachse horizontal. Genau deshalb steuern dieselben Eigenschaften je nach Richtung mal die Breite, mal die Höhe.
