🧭 1. Das Achsensystem von Flexbox
Sobald ein Element display: flex erhält, wird es zum Flex-Container. Alle direkten Kindelemente werden zu Flex-Items. Flexbox arbeitet entlang zweier Achsen:
➡ Hauptachse (Main Axis: flex-direction: row)
Item 1
Item 2
Item 3
⬇ Querachse (Cross Axis: senkrecht zur Hauptachse)
.flex-container {
display: flex;
flex-direction: row; /* row (Standard), column, row-reverse, column-reverse */
}🎯 2. Ausrichtung: justify-content vs. align-items
Die beiden wichtigsten Eigenschaften zur Positionierung der Items:
| Eigenschaft | Achse | Wichtige Werte | Verwendungszweck |
|---|---|---|---|
justify-content |
Hauptachse (X bei row) | flex-start, center, flex-end, space-between, space-around, space-evenly |
Verteilung des freien horizontalen Platzes |
align-items |
Querachse (Y bei row) | stretch, center, flex-start, flex-end, baseline |
Vertikale Zentrierung und Höhenanpassung |
/* 🌐 Perfekte Navigationsleiste: */
.navbar {
display: flex;
justify-content: space-between; /* Logo links, Links/Button rechts */
align-items: center; /* Vertikal mittig */
gap: 20px;
}🚗 Didaktische Analogie: Der Zug auf Schienen
Die Hauptachse ist die Zugstrecke: Mit justify-content schiebst du die Waggons nach vorne, in die Mitte oder verteilst Lücken zwischen ihnen. Die Querachse ist die Waggon-Breite: Mit align-items zentrierst du die Fahrgäste auf ihren Sitzen.
📦 3. Flex-Wrap, Gap & Item-Sizing
Für mehrzeilige Kartengitter kombinieren wir flex-wrap: wrap mit der flex-Kurzschreibweise:
.card-grid {
display: flex;
flex-wrap: wrap; /* Erlaubt Umbruch in nächste Zeile */
gap: 24px; /* Moderner Zeilen- und Spaltenabstand */
}
.card {
/* flex: flex-grow | flex-shrink | flex-basis */
flex: 1 1 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card__badge {
align-self: flex-start; /* Individuelle Ausrichtung auf Querachse */
}🎯 Aufgaben & Checkliste in aufgabe.html
💡 Tipp für absolute Zentrierung
Ein Element exakt in der Mitte eines Containers zu platzieren erfordert mit Flexbox nur zwei Zeilen: display: flex; justify-content: center; align-items: center;.