CSS Flex-Container
Die Flexbox-Einführung hat Eltern zu Containern gemacht. Diese Lektion bleibt beim Container: Hauptachse wählen, Raum verteilen, auf der Kreuzachse ausrichten und Zeilen umbrechen. Item-Wachstum (flex-grow, flex-basis) wartet auf Flex Items.
Ein Flex-Container-Toolkit
📊 Flex-Container auf einen Blick
| Eigenschaft | Alltagsjob |
|---|---|
flex-direction |
Setzt die Hauptachse: row, column oder Reverse-Varianten |
justify-content |
Verteilt Items entlang der Hauptachse |
align-items |
Richtet Items auf der Kreuzachse aus (eine Zeile) |
flex-wrap |
Erlaubt Umbruch auf neue Zeilen |
align-content |
Packt mehrere Flex-Zeilen auf der Kreuzachse |
gap |
Abstand zwischen Items (und Zeilen) ohne Margin-Kämpfe |
Merke: justify fährt auf der Hauptachse; align auf der Kreuzachse. Stellst du flex-direction auf column, drehen diese Rollen mit den Achsen mit.
flex-direction — Hauptachse wählen
Standard ist row. Nutze column für vertikale Stapel wie Side-Navs oder Formulargruppen. Reverse-Varianten drehen die visuelle Reihenfolge — prüfe, dass die Lesereihenfolge sinnvoll bleibt.
.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
justify-content — Verteilung auf der Hauptachse
Verteile freien Raum entlang der Hauptachse: flex-start, center, flex-end, space-between, space-around, space-evenly. Header wollen oft space-between.
.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}
align-items — Ausrichtung auf der Kreuzachse
Auf einer Zeile steuert align-items Höhe/vertikale Lage in einer Row (bzw. horizontal in einer Column). stretch ist Standard; center ist alltäglicher UI-Kleber.
.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}
Wrap und align-content
Mit flex-wrap: wrap bilden Extra-Items neue Zeilen. align-content packt diese Zeilen, wenn freier Kreuzachsen-Raum da ist — bei nowrap bewirkt es wenig.
.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}
Eine ruhige Container-Gewohnheit
Zuerst direction, dann justify, dann align-items, dann wrap bei Bedarf. gap für Zwischenräume behalten. Item-Wachstum für die nächste Lektion sparen — und 2D-Seitengrids später CSS Grid überlassen.
.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Probier es selbst
- Baue ein
.stackmitflex-direction: columnund drei Blöcken. - Vergleiche
justify-content: space-betweenvs.centerauf einer breiten Leiste. - Erhöhe
min-heightund testealign-items: stretchvs.center. - Wickle Chips und schau dir
align-content: flex-startan. - Schreibe einen Satz: Welche Eigenschaften gehören als Nächstes zu Items, nicht zum Container?
Typische Fehler
- Justify und Align mental vertauschen, nachdem die Richtung gewechselt wurde
row-reverseohne Prüfung von Tastatur-/Lesereihenfolge- Erwarten, dass
align-contentbeinowrapzählt flex-growauf den Container statt auf ein Item legen- Von Flexbox-Container-Props ein volles 2D-Grid verlangen
Zusammenfassung
- Container-Props steuern Richtung, Verteilung, Ausrichtung und Wrap
flex-directiondefiniert die Hauptachsejustify-contentvs.align-itemsfolgen Haupt- vs. Kreuzachse- Wrap ermöglicht Mehrzeilen-Packs;
align-contentpackt diese Zeilen - Item-Wachstum wartet auf die Flex-Items-Lektion
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt