Vollstandiger CSS-Flexbox-Guide: flexible Layouts 2026 meistern
Lerne CSS Flexbox von Grund auf. Flex-Container, Ausrichtung, grow, shrink, basis und typische Muster wie Zentrierung, Navbar, Kartenraster und Holy-Grail-Layout.
Was CSS Flexbox ist und warum du es beherrschen solltest
CSS Flexbox ist ein eindimensionales Layout-Modell, mit dem sich Elemente in einem Container deutlich einfacher ausrichten und verteilen lassen als mit Floats, Tabellen oder absoluter Positionierung.
Flexbox lost klassische CSS-Probleme wie vertikale Zentrierung, gleichmaBige Verteilung von Platz und responsive Komponenten mit wenig Code. Deshalb ist es fur modernes Frontend fast unverzichtbar.
- Einfaches Zentrieren auf beiden Achsen
- Flexible GroBen durch Wachsen, Schrumpfen und Umbruch
- Klare Achsenlogik fur besser vorhersehbares Verhalten
Zum direkten Testen kannst du unseren Flexbox-Playground offnen.
Der Flex-Container: display flex und die Hauptachse
Alles beginnt mit display: flex auf dem Elternelement. Die direkten Kinder werden dadurch automatisch zu Flex-Items.
StandardmaBig liegen sie in einer horizontalen Reihe, umbrechen nicht, starten am Anfang der Hauptachse und werden auf der Kreuzachse gestreckt.
| Wert | Hauptachse | Richtung |
|---|---|---|
row | Horizontal | Links nach rechts |
row-reverse | Horizontal | Rechts nach links |
column | Vertikal | Oben nach unten |
column-reverse | Vertikal | Unten nach oben |
flex-wrap steuert den Umbruch. Mit flex-flow lassen sich Richtung und Wrap zusammenfassen.
Ausrichtungseigenschaften: justify-content und align-items
justify-content richtet entlang der Hauptachse aus, align-items entlang der Kreuzachse.
| Eigenschaft | Wirkung |
|---|---|
justify-content: center | Zentriert auf der Hauptachse |
space-between | Verteilt Abstand zwischen den Elementen |
align-items: center | Zentriert auf der Kreuzachse |
align-items: stretch | Streckt Elemente auf der Kreuzachse |
Bei mehreren Zeilen hilft align-content. Fur saubere Abstande zwischen Items ist gap meist die beste Wahl.
Flex-Item-Eigenschaften: grow, shrink und basis
Diese Eigenschaften bestimmen, wie einzelne Elemente den verfugbaren Platz nutzen.
- flex-grow: wie stark ein Item wachsen darf
- flex-shrink: wie stark es schrumpfen darf
- flex-basis: die AusgangsgroBe vor der Verteilung
Mit flex lassen sich alle drei Werte kombinieren. flex: 1 erzeugt ein klassisch flexibles Element, flex: none blockiert GroBenanderungen und flex: 0 0 250px fixiert die GroBe.
align-self uberschreibt die Ausrichtung eines einzelnen Items, wahrend order nur die visuelle Reihenfolge andert.
Typische Muster: Zentrierung, Navbar und Sticky Footer
Flexbox ist besonders stark bei alltaglichen UI-Mustern.
- Perfekte Zentrierung:
display: flex; justify-content: center; align-items: center; - Navbar:
justify-content: space-betweentrennt Logo und Navigation - Sticky Footer: Wrapper in Spaltenrichtung mit
min-height: 100vhund Hauptinhalt aufflex: 1 - Letztes Element rechts:
margin-left: auto - Sidebar + Inhalt: Sidebar fix, Inhaltsbereich flexibel
Diese Muster kannst du im Flexbox-Playground testen.
Responsives Kartenraster und Holy-Grail-Layout
Fur Kartenraster wird oft display: flex; flex-wrap: wrap; gap: 24px; auf dem Container und flex: 1 1 300px; auf den Karten verwendet. So bleiben Karten flexibel und trotzdem gut lesbar.
Das Holy-Grail-Layout kombiniert Header, Footer, Sidebars und Hauptinhalt. Ein auBerer Wrapper in Spaltenrichtung fullt den Viewport, die Mitte wird ein weiterer Flex-Container.
- Wrapper:
display: flex; flex-direction: column; min-height: 100vh; - Mittelbereich:
display: flex; flex: 1; - Sidebar:
flex: 0 0 200px; - Hauptinhalt:
flex: 1;
Flexbox vs. CSS Grid: wann du was einsetzen solltest
Flexbox eignet sich fur eindimensionale Layouts, CSS Grid fur zweidimensionale Strukturen mit Zeilen und Spalten.
- Nutze Flexbox fur Navbars, Karten, Formulare und interne Ausrichtung
- Nutze Grid fur Seitenstruktur und komplexe Raster
| Aspekt | Flexbox | Grid |
|---|---|---|
| Dimension | 1D | 2D |
| Starke | Ausrichtung | Struktur |
| Typischer Einsatz | Komponenten | Seitenlayout |
In realen Projekten erganzen sich beide hervorragend. Teste das im Flexbox-Playground und im CSS-Grid-Generator.
Haufige Fehler und fortgeschrittene Flexbox-Tipps
Typische Fehler in Flexbox-Projekten sind:
- flex-shrink vergessen: Standardwert 1 sorgt oft fur unerwartetes Schrumpfen
- width statt flex-basis verwenden
- min-width: 0 weglassen bei Text, der gekurzt werden soll
- Komplexe 2D-Raster mit Flexbox erzwingen
Nutzliche Tipps:
- margin-left: auto schiebt ein Item an das andere Ende
- flex: 1 1 0% verteilt Platz oft gleichmaBiger
- Verschachtelte Flex-Container sind in komplexen UIs sehr hilfreich
- order andert die visuelle, aber nicht die semantische Reihenfolge
Zum Uben und Debuggen hilft unser interaktiver Flexbox-Playground.
Probieren Sie dieses Tool:
Tool öffnen→Häufig gestellte Fragen
Was ist der Unterschied zwischen justify-content und align-items?
justify-content richtet Elemente entlang der Hauptachse aus, align-items entlang der Kreuzachse. Bei flex-direction: row ist das meist horizontal gegenuber vertikal.
Was macht flex: 1 genau?
flex: 1 steht meist fur flex-grow: 1, flex-shrink: 1 und flex-basis: 0%. Das Element teilt sich also den verfugbaren Platz flexibel mit anderen Items.
Wie zentriere ich eine div vertikal und horizontal mit Flexbox?
Setze am Elternelement display: flex; justify-content: center; align-items: center; und gib dem Container eine definierte Hohe, etwa min-height: 100vh.
Flexbox oder Grid: Was sollte ich zuerst lernen?
Flexbox. Es ist einfacher, lost viele alltagliche Layout-Probleme und bildet eine gute Grundlage fur CSS Grid.
Warum brechen meine Flex-Items nicht in die nachste Zeile um?
Weil flex-wrap standardmaBig auf nowrap steht. Wenn Elemente umbrechen sollen, setze flex-wrap: wrap; auf den Container.
Kann ich Flexbox und CSS Grid im selben Projekt verwenden?
Ja, und das ist oft die beste Losung. Grid eignet sich fur die groBe Struktur, Flexbox fur die interne Ausrichtung von Komponenten.