Flexbox im Detail: Ausrichtung, Umbruch, Reihenfolge
Beherrschen Sie justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis und die Eigenschaft order.
Flexbox im Detail: Ausrichtung, Umbruch, Reihenfolge ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Wiederholung: Flex-Container und Flex-Elemente
Zusammenfassung: display: flex am Container macht aus dessen direkten Kindern Flex-Elemente. Die Hauptachse verläuft entlang von flex-direction. Die Querachse steht senkrecht dazu.
justify-content-Werte im Detail
Alle justify-content-Werte für einen Container mit Zeilenrichtung: flex-start (Standard), flex-end, center, space-between (Abstände nur zwischen den Elementen), space-around (gleich großer Außenabstand um jedes Element), space-evenly (überall gleich große Abstände).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items im Vergleich zu align-content
align-items richtet Elemente innerhalb einer einzelnen Zeile aus. align-content richtet mehrere Zeilen aus (funktioniert nur, wenn flex-wrap auf wrap gesetzt ist und mehrere Zeilen vorhanden sind).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self für einzelne Elemente
align-self überschreibt align-items für ein bestimmtes Flex-Element. Das ist nützlich, wenn ein Element gestreckt werden soll, während die anderen zentriert bleiben.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap und wrap-reverse
flex-wrap: wrap ermöglicht es Elementen, in neue Zeilen umzubrechen. wrap-reverse bricht ebenfalls um, jedoch in die entgegengesetzte Richtung. Kombinieren Sie dies mit gap, um einfache responsive Raster zu erstellen.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow, flex-shrink, flex-basis
Die dreiteilige flex-Kurzschreibweise für Elemente. flex-grow: Anteil am verfügbaren Platz. flex-shrink: Stärke der Verkleinerung, wenn der Platz knapp ist. flex-basis: Ausgangsgröße vor dem Vergrößern oder Verkleinern.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Übliche flex-Kurzschreibweisen
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (nimmt doppelt so viel Platz ein wie flex: 1).
Die Eigenschaft order
order ändert die visuelle Reihenfolge von Flex-Elementen, ohne das HTML zu verändern. Der Standardwert ist 0. Negative Werte erscheinen vor 0. Verwenden Sie die Eigenschaft mit Bedacht — Abweichungen zwischen visueller Reihenfolge und DOM-Reihenfolge verwirren Tastatur- und Screenreader-Benutzer.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 zur Behebung von Überläufen
Flex-Elemente haben implizit min-width: auto. Das bedeutet, dass sie nicht kleiner als ihre Inhaltsgröße werden. Setzen Sie min-width: 0, damit sie sich stärker verkleinern können — das ist für das Kürzen von Text innerhalb von Flex-Elementen unerlässlich.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Flex-Abstände ohne gap
Verwenden Sie in älteren Umgebungen ohne gap-Unterstützung einen Außenabstand an den Elementen und einen negativen Außenabstand am Container, um Zwischenräume zu erzeugen. Heute wird gap jedoch von allen modernen Browsern unterstützt — bevorzugen Sie daher diese Eigenschaft.
Verschachtelte Flex-Container
Jedes Flex-Element kann selbst ein Flex-Container sein. Verschachteln Sie Flexbox für komplexe Layouts: beispielsweise eine Reihe von Karten, deren Inhalte ebenfalls mit Flexbox angeordnet sind. Das ist ein übliches Muster in modernen Layouts.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Kurzer Test
Welche Eigenschaft verteilt den Platz zwischen Flex-Elementen entlang der Querachse, wenn flex-wrap auf wrap gesetzt ist?
Zusammenfassung: Flexbox im Detail
justify-content verteilt Elemente entlang der Hauptachse. align-items richtet Elemente auf einer einzelnen Zeile entlang der Querachse aus. align-content richtet mehrere Zeilen entlang der Querachse aus. align-self gilt für einzelne Elemente. flex-wrap: wrap aktiviert mehrere Zeilen. Die flex-Kurzschreibweise steuert Vergrößerung, Verkleinerung und Ausgangsgröße. order ändert die visuelle Reihenfolge. min-width: 0 verhindert Probleme beim Verkleinern.
Häufig gestellte Fragen
Ist die Lektion „Flexbox im Detail: Ausrichtung, Umbruch, Reihenfolge“ kostenlos?
Ja — der vollständige Text von „Flexbox im Detail: Ausrichtung, Umbruch, Reihenfolge“ 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 im Detail: Ausrichtung, Umbruch, Reihenfolge“?
Beherrschen Sie justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis und die Eigenschaft order. 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 1 von 4.
Wie lange dauert die Lektion „Flexbox im Detail: Ausrichtung, Umbruch, Reihenfolge“?
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
- Flexbox im Detail: Ausrichtung, Umbruch, Reihenfolge
- CSS Grid: template-areas, auto-fit, minmax
- Flexbox und Grid kombinieren
- CSS-Variablen für Themes