CSS Flexbox
CSS Flexbox
display flex, Richtung, Ausrichtung, gap, wrapping und typische Layouts. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- Flexbox für eindimensionale Layouts einsetzen
- Achsen und Ausrichtung verstehen
- Navbars, Kartenreihen und Zentrierung bauen
Erklärung
Flexbox verteilt Elemente entlang einer Hauptachse. flex-direction legt die Richtung fest. justify-content arbeitet auf der Hauptachse, align-items auf der Querachse. gap erzeugt saubere Abstände zwischen Items.
Flexbox ist besonders stark für Reihen oder Spalten, bei denen die Größe der Elemente flexibel sein soll.
Beispiele
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
Die Navigation verteilt Bereiche, die Kartenliste darf umbrechen.
.center {
display: flex;
align-items: center;
justify-content: center;
}
Diese Kombination zentriert ein Element horizontal und vertikal im Container.
Typische Fehler
justify-contentundalign-itemsverwechseln.- Abstände mit Margins an jedem Item statt
gapbauen. - Flexbox für komplexe zweidimensionale Raster erzwingen.
Best Practices
- Nutze Flexbox für eine Richtung: Zeile oder Spalte.
- Erlaube Umbruch mit
flex-wrap, wenn Inhalte sonst gequetscht werden. - Teste lange Texte in Buttons und Navigationen.
Kleine Übung
Baue eine responsive Navbar und eine Reihe von Karten, die bei schmalem Bildschirm umbrechen.
Zusammenfassung
CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026