Die Flexbox (Flexible Box Layout) ist ein CSS-Modul, das für einfaches, dynamisches Anordnen von Elementen in Zeilen oder Spalten entwickelt wurde.
Sie erleichtert die Erstellung von zentrierten, responsiven und gleichmäßig verteilten Layouts.
1. Grundstruktur
HTML
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
CSS
.container {
display: flex; /* aktiviert Flexbox */
}
2. Hauptbegriffe
| Begriff | Beschreibung |
|---|---|
| Flex Container | Das übergeordnete Element mit display: flex |
| Flex Items | Die direkten Kindelemente im Container |
| Main Axis | Hauptachse, standardmäßig horizontal (left → right) |
| Cross Axis | Querachse, senkrecht zur Hauptachse |
3. Container-Eigenschaften
| Eigenschaft | Werte | Beschreibung |
|---|---|---|
display | flex / inline-flex | Aktiviert das Flexbox-Layout |
flex-direction | row (Standard) / row-reverse / column / column-reverse | Richtung der Hauptachse |
flex-wrap | nowrap / wrap / wrap-reverse | Umbruch der Elemente |
flex-flow | Kombi aus flex-direction und flex-wrap | Kurzschreibweise |
justify-content | flex-start / flex-end / center / space-between / space-around / space-evenly | Ausrichtung entlang der Hauptachse |
align-items | stretch (Standard) / flex-start / flex-end / center / baseline | Ausrichtung entlang der Querachse |
align-content | stretch / flex-start / flex-end / center / space-between / space-around | Nur relevant bei mehreren Zeilen (mit flex-wrap) |
| gap | z.B. 10px, 3rem oder 5% | Abstand („Gutter“) zwischen Items im Container |
4. Item-Eigenschaften
| Eigenschaft | Werte / Syntax | Beschreibung |
|---|---|---|
order | Zahl (Standard: 0) | Reihenfolge der Items (niedrig = zuerst) |
flex-grow | Zahl (z. B. 1) | Wie stark ein Item wächst, um freien Platz zu füllen |
flex-shrink | Zahl (z. B. 1) | Wie stark ein Item schrumpft, wenn Platz fehlt |
flex-basis | Längenwert / auto | Ausgangsgröße eines Items vor Wachstum oder Schrumpfung |
flex | flex-grow flex-shrink flex-basis | Kurzschreibweise (z. B. flex: 1 0 200px;); bevorzugt verwenden, weil automatisch intelligente Wertzuweisung für shrink und basis, wenn nicht vergeben ! |
align-self | auto / flex-start / flex-end / center / baseline / stretch | Überschreibt align-items für ein einzelnes Item |
5. Beispiele
Zentrieren in beide Richtungen
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
Gleichmässige Verteilung
.container {
display: flex;
justify-content: space-between;
}
Flexibles Layout mit fester und dynamischer Spalte
.sidebar {
flex: 0 0 200px; /* fix 200px */
}
.main {
flex: 1; /* füllt restlichen Platz */
}
6. Kurzschreibweise
flex: <grow> <shrink> <basis>;
| Beispiel | Bedeutung |
|---|---|
flex: 1; | wächst gleichmäßig, Basis = 0 |
flex: 0 1 auto; | Standardwert |
flex: 2 0 100px; | doppelte Wachstumsrate, Basis 100px |
7. Vergleich Flex vs Grid
| Kriterium | Flexbox | Grid |
|---|---|---|
| Achsen | 1D (eine Achse) | 2D (Zeilen & Spalten) |
| Fokus | Verteilung von Items | Struktur ganzer Layouts |
| Reihenfolge | Dynamisch mit order | Feste Rasterpositionen |
| Beste Nutzung | Navigation, Karten, Zentrierung | Seitenlayouts, komplexe Strukturen |
8. Links
CSS-Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/