CSS-Layout: Flexbox
Bis Flexbox kam (ca. 2015), war Layout in CSS ein Albtraum. Floats, Tabellen, absolute Positionierung – alles Tricks die nicht für Layout gemacht waren. Heute gibt es zwei moderne Layout-Engines: Flexbox (für eindimensionale Anordnungen) und Grid (für zweidimensionale, Lektion 9). Wer beide beherrscht, baut Layouts schnell und sauber.
Flexbox ist perfekt für Reihen oder Spalten: eine Navigationsleiste, Karten nebeneinander, Buttons mit Icons, Liste von Tags. Die Grundidee: du sagst dem Eltern-Element display: flex und kannst dann mit wenigen Eigenschaften steuern wie die Kinder angeordnet werden.
1) Die Grundidee: Flex Container + Flex Items
Flexbox arbeitet mit zwei Rollen. Das Eltern-Element bekommt display: flex – es wird zum Flex-Container. Seine direkten Kinder werden automatisch zu Flex-Items. Die Magie passiert über CSS-Eigenschaften am Container (die wirken auf alle Items) und einzelne am Item:
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
}
/* Item-Eigenschaften (am Kind-Element) */
.item {
flex: 1;
align-self: flex-end;
}
Wichtig zu merken: nur direkte Kinder werden zu Flex-Items. Ein Enkel-Element wird nicht automatisch beeinflusst. Wenn du Flex auch dort brauchst, musst du den Zwischen-Container ebenfalls zum Flex-Container machen (Verschachtelung).
2) Hauptachse und Kreuzachse
Flexbox hat zwei Achsen, deren Orientierung von flex-direction abhängt. Das ist DAS Konzept das man beim Lernen verinnerlichen muss: justify-content wirkt entlang der Hauptachse, align-items entlang der Kreuzachse:
flex-direction: row verläuft die Hauptachse horizontal (links nach rechts), die Kreuzachse vertikal. Bei flex-direction: column dreht sich alles um 90° – Hauptachse vertikal, Kreuzachse horizontal. Auch verfügbar: row-reverse und column-reverse für umgekehrte Reihenfolge. Diese Achsen-Logik ist der Schlüssel zu Flexbox. Wer sich daran gewöhnt, kann komplexe Layouts intuitiv aufbauen.3) Die große Live-Spielwiese
Probier alle wichtigen Flex-Eigenschaften aus. Ändere die Dropdowns und sieh wie sich die fünf Boxen in Echtzeit anordnen:
flex-directionjustify-contentalign-itemsflex-wrapgap4) Container-Eigenschaften im Überblick
Die wichtigsten Eigenschaften die du dem Container gibst:
- display: flex – aktiviert Flexbox (oder
inline-flexfür inline-Verhalten) - flex-direction – Hauptachse:
row,column,row-reverse,column-reverse - justify-content – Anordnung entlang Hauptachse:
flex-start,center,flex-end,space-between,space-around,space-evenly - align-items – Anordnung entlang Kreuzachse:
stretch,flex-start,center,flex-end,baseline - flex-wrap – Umbruch bei zu vielen Items:
nowrap,wrap,wrap-reverse - gap – Abstand zwischen Items:
gap: 1remoder getrenntrow-gap/column-gap - align-content – nur wenn mehrere Zeilen (mit wrap): wie werden die Zeilen vertikal verteilt
5) Item-Eigenschaften: einzelne Anpassungen
Manchmal will man einzelne Items anders behandeln. Dafür gibt es Item-Eigenschaften die am Flex-Item selbst gesetzt werden:
- flex-grow – wie viel Wachstum bekommt das Item wenn Platz übrig ist? (Default 0)
- flex-shrink – wie viel schrumpfen wenn zu wenig Platz? (Default 1)
- flex-basis – die Ausgangs-Größe vor Verteilung
- flex – Shorthand für die drei:
flex: 1 1 0oder kurzflex: 1 - align-self – überschreibt align-items für dieses eine Item
- order – ändert die Anzeige-Reihenfolge ohne HTML zu ändern
.featured {
flex: 2; /* alle anderen mit flex: 1 -> doppelt */
}
/* Item nach unten an die Cross-Achse ausrichten */
.spezial {
align-self: flex-end;
}
6) Klassische Pattern-Beispiele
Hier sind Flex-Patterns die du im echten Leben immer wieder brauchst:
display: flex;
justify-content: space-between;
}
display: flex;
justify-content: flex-end;
gap: .5rem;
}
display: flex;
justify-content: center;
align-items: center;
}
.card { flex: 1; }
.side { width: 60px; }
.main { flex: 1; }
display: flex;
flex-direction: column;
gap: .5rem;
}
display:flex; justify-content:center; align-items:center; – früher ein CSS-Trick mit absoluter Positionierung und Transform-Hack, heute drei Zeilen. Flexbox hat den Webdev-Alltag massiv vereinfacht.7) flex: 1 – das magische Eins
Eine der häufigsten Flex-Shorthands: flex: 1. Was bedeutet das? Es ist eine Kurzform für flex: 1 1 0 – also flex-grow 1, flex-shrink 1, flex-basis 0. Praktisch heißt das: „nimm allen verfügbaren Platz, verteilt gleichmäßig auf alle Items mit dem gleichen flex".
Beispiel: drei Items, alle mit flex: 1 → drei gleich breite Spalten. Eines mit flex: 2, die anderen mit flex: 1 → das erste doppelt so breit wie die anderen. Wer einmal verstanden hat warum flex: 1 so mächtig ist, baut viele Layouts schneller als mit jedem anderen Tool.
8) Flexbox vs. Grid: wann was?
Flexbox und Grid (Lektion 9) sind beide moderne Layout-Engines. Die wichtigste Unterscheidung:
- Flexbox = eindimensional. Eine Reihe ODER eine Spalte. Items fließen automatisch und nehmen so viel oder so wenig Platz wie sie brauchen. Ideal für Navi-Menüs, Karten-Reihen, Buttons, Tags.
- Grid = zweidimensional. Reihen UND Spalten gleichzeitig planbar. Ideal für komplette Seiten-Layouts mit Header, Sidebar, Main, Footer. Pixelgenaue Kontrolle.
In Wirklichkeit kombiniert man beide: Grid für das große Seiten-Layout, Flexbox für die kleinen Komponenten innendrin. L9 Grid zeigt das Gegenstück.
9) Vertikales Zentrieren – Endlich gelöst
Bis Flexbox kam, war vertikales Zentrieren eine notorische CSS-Frustquelle. Es gab Tricks mit position: absolute + Transform, mit Tabellen-Hacks, mit Vertical-Align – alle umständlich. Heute reichen drei Zeilen:
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertikal */
min-height: 100vh; /* falls full-screen */
}
Das funktioniert für jeden Inhalt: Text, Bilder, ganze Komponenten. Egal ob das Kind 50px oder 500px hoch ist – immer perfekt zentriert. Aus diesem Grund haben sich viele Entwickler Flexbox „nur" um endlich vertikales Zentrieren zu können gemerkt – aber das ist nur einer von vielen Anwendungsfällen.
Zusammenfassung
Flexbox = eindimensionales Layout für Reihen oder Spalten. display: flex am Eltern-Element → direkte Kinder werden Flex-Items. flex-direction bestimmt Hauptachse (row default, column). justify-content richtet entlang Hauptachse aus (flex-start, center, space-between, space-around, space-evenly). align-items richtet entlang Kreuzachse aus (stretch, center, ...). flex-wrap erlaubt Umbruch. gap für Abstand zwischen Items. Am Item: flex: 1 für „nimm gleichen Anteil am Restplatz", align-self für Sonderbehandlung, order für andere Reihenfolge. Vertikales Zentrieren: display:flex; justify-content:center; align-items:center;. Flexbox für Komponenten, Grid für Seiten-Layouts.