CSS Flexbox
Seitenkomponenten haben Hüllen, Leisten, Menüs und Galerien skizziert. Flexbox ist der moderne Weg, Elemente in einer Richtung anzuordnen — Zeile oder Spalte — mit weniger Float-Gefummel. Schalte display: flex ein, lerne Flex Items kennen und gehe in den nächsten Flexbox-Lektionen tiefer.
Ein Flexbox-Starter-Toolkit
📊 Flexbox auf einen Blick
| Idee | Alltagsjob |
|---|---|
| Flex-Container | Elternteil mit display: flex (oder inline-flex) |
| Flex Items | Direkte Kinder, die am Flex-Layout teilnehmen |
| Hauptachse | Primäre Laufrichtung der Items (standardmäßig Zeile) |
| Querachse | Die senkrechte Richtung für Ausrichtung |
gap |
Eingebauter Abstand zwischen Items |
| Nächste Lektionen | Container-Props, Item-Props, responsive Flex-Muster |
Flexbox ist in einer Dimension am stärksten. Für vollständige zweidimensionale Seitenraster kommt das Grid-Modul nach dieser Flexbox-Strecke.
Flex-Container einschalten
Setze display: flex auf dem Elternteil. Kinder werden Flex Items und sitzen standardmäßig in einer Zeile.
.toolbar {
display: flex;
align-items: center;
}
.toolbar .btn {
padding: 0.5rem 0.75rem;
}
Gap statt Margin-Kämpfe
gap beabstandet Items ohne Collapse-Tricks. Bevorzuge es für gleichmäßige Rinnen zwischen Flex-Kindern.
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}
Items auf der Hauptachse auseinanderdrücken
justify-content verteilt freien Raum entlang der Hauptachse. space-between ist ein klassisches Header-Muster: Marke links, Aktionen rechts.
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Auf der Querachse zentrieren — und auf beiden
align-items: center richtet Items auf der Querachse aus. Kombiniere mit justify für einen ruhigen zentrierten Cluster in einer Box.
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}
Umbrechen, wenn die Zeile keinen Platz mehr hat
flex-wrap: wrap lässt Items in die nächste Zeile fallen — das hast du in der Galerie schon gestreift. Die Lektion Flex Responsive geht weiter.
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
Eine ruhige Flexbox-Gewohnheit
Nutze Flexbox für eindimensionale Zeilen und Spalten: Navs, Toolbars, Kartenreihen, Zentrieren. Als Nächstes Container-Details, dann Item-Wachstum/-Schrumpfen, dann responsives Flex. Erwarte nicht, dass Flexbox allein jedes Grid-Layout ersetzt.
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}
.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }
Probiere es selbst
- Baue eine
.toolbarmitdisplay: flexund drei Buttons. - Füge
gapundalign-items: centerhinzu. - Baue einen Header mit
justify-content: space-between. - Zentriere ein Button-Paar in einer Box mit justify + align.
- Notiere, welche kommende Lektion
flex-grow/flex-basisabdeckt.
Typische Fehler
display: flexblind auf jede Hülle streuen ohne Layout-Ziel- Von Flexbox volles 2D-Grid-Verhalten erwarten
- Abstände mit zufälligen Margins statt
gaperkämpfen - Die nächsten Lektionen überspringen und nur diese Intro auswendig lernen
- Für immer bei Float-Zeilen bleiben, wenn eine Flex-Zeile klarer ist
Zusammenfassung
- Flexbox legt Items entlang einer Hauptachse aus
display: flexerzeugt einen Container; Kinder sind Flex Itemsgap,justify-contentundalign-itemsöffnen Alltagszeilen- Wrap streift responsive Zeilen; mehr kommt später
- Container-, Item- und responsive Flexbox-Lektionen vertiefen das Modell als Nächstes
🧠 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