Flexbox für Layouts
Verwenden Sie Flexbox, um Elemente in einer Zeile oder Spalte auszurichten, Platz zu verteilen und Inhalte ohne Float-Tricks umzubrechen.
Flexbox für Layouts ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Flexbox?
Flexbox (Flexible Box Layout) ist ein CSS-Layoutmodell für eindimensionale Layouts — es verteilt Platz entlang einer einzigen Zeile oder Spalte. Es löst Probleme, die sich mit Float-basierten Layouts nicht elegant bewältigen ließen.
Flexbox aktivieren
Wenden Sie display: flex auf den Container an. Seine direkten untergeordneten Elemente werden automatisch zu Flex-Elementen. Untergeordnete Elemente dieser Flex-Elemente sind davon nicht betroffen.
.container {
display: flex;
}
/* All direct children are now flex items */flex-direction
Legt die Hauptachse fest. row (Standard): Elemente werden von links nach rechts angeordnet. row-reverse: von rechts nach links. column: von oben nach unten. column-reverse: von unten nach oben.
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }justify-content — Ausrichtung auf der Hauptachse
Verteilt den Platz entlang der Hauptachse. flex-start (Standard), flex-end, center, space-between, space-around, space-evenly.
.nav {
display: flex;
justify-content: space-between; /* logo left, links right */
}
.centered {
display: flex;
justify-content: center; /* items in the middle */
}align-items — Ausrichtung auf der Querachse
Richtet Elemente entlang der Querachse aus (senkrecht zur Hauptachse). stretch (Standard), center, flex-start, flex-end, baseline.
.card {
display: flex;
align-items: center; /* vertically center content */
}gap-Eigenschaft
gap: row-gap column-gap fügt zwischen Flex-Elementen Platz ein, ohne margin zu verwenden. Das ist deutlich sauberer als der margin-Trick. In modernen Browsern wird es umfassend unterstützt.
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 24px in all directions between items */
gap: 16px 24px; /* row-gap column-gap */
}flex-wrap
Standardmäßig werden Flex-Elemente in eine Zeile gepresst. flex-wrap: wrap ermöglicht den Umbruch in neue Zeilen, wenn die Elemente nicht hineinpassen. Kombinieren Sie dies mit gap, um ein einfaches responsives Grid zu erstellen.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
}Die flex-Kurzschreibweise für Elemente
flex: grow shrink basis wird auf Flex-Elemente angewendet. flex: 1 ist eine Kurzschreibweise für 1 1 0% — die Elemente wachsen gleichmäßig und ignorieren ihre Inhaltsgröße. flex: 0 0 200px erstellt ein festes Element mit 200px Breite.
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes remaining space */align-self
align-self auf einem Flex-Element überschreibt für dieses eine Element die align-items-Einstellung des Containers. Das ist nützlich, wenn ein Element anders als seine Geschwister ausgerichtet werden soll.
.container { display: flex; align-items: center; }
.tall-item { align-self: flex-start; }order-Eigenschaft
order steuert die visuelle Reihenfolge von Flex-Elementen, ohne die HTML-Reihenfolge zu ändern. Der Standardwert ist 0. Niedrigere Werte erscheinen zuerst. Verwenden Sie dies sparsam — es erzeugt einen Unterschied zwischen der visuellen Reihenfolge und der DOM- bzw. Lesereihenfolge.
Mit Flexbox zentrieren
Die einfachste Möglichkeit, ein Element sowohl horizontal als auch vertikal zu zentrieren: Setzen Sie beim übergeordneten Element display: flex; justify-content: center; align-items: center.
.overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}Kurztest
Welche Flexbox-Eigenschaft verteilt den Platz zwischen Elementen entlang der Hauptachse?
Zusammenfassung: Flexbox-Grundlagen
display: flex für den Container. flex-direction: row oder column für die Achse. justify-content für die Verteilung auf der Hauptachse. align-items für die Querachse. gap für Zwischenräume. flex-wrap für mehrere Zeilen. Die flex-Kurzschreibweise auf Elementen steuert deren Wachstum. Ein vielseitiges eindimensionales Layoutsystem.
Häufig gestellte Fragen
Ist die Lektion „Flexbox für Layouts“ kostenlos?
Ja — der vollständige Text von „Flexbox für Layouts“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Flexbox für Layouts“?
Verwenden Sie Flexbox, um Elemente in einer Zeile oder Spalte auszurichten, Platz zu verteilen und Inhalte ohne Float-Tricks umzubrechen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Flexbox für Layouts“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das viewport-Meta-Tag
- Flexbox für Layouts
- CSS Grid für Layouts
- Media Queries und Mobile-First-Entwicklung