Lädt...

Responsives Flex CSS

Flex Items hat jedes Kind bemessen. Responsives Flex stellt die nächste Frage: Wenn der Viewport schrumpft, soll diese Flex-Zeile umbrechen, stapeln oder die Richtung drehen? Lerne ein paar ruhige Media-Query-Muster — tiefere Responsive-Design- und Media-Queries-Module kommen später.

Ein Werkzeugkasten für responsives Flex

📊 Responsives Flex auf einen Blick

Werkzeug	Alltagseinsatz
`flex-wrap`	Lässt Items in eine neue Zeile rutschen, wenn die Reihe zu eng wird
`flex-direction`	Wechselt `row` ↔ `column` am Breakpoint, um Abschnitte zu stapeln
Media query	Wendet eine neue Flex-Regel nur an, wenn der Viewport passt
`flex-basis` / `min-width`	Steuert, wann Karten umbrechen oder nebeneinander bleiben
`gap`	Hält Abstände ehrlich, wenn Zeilen umbrechen
`order` für Layout meiden	DOM-Reihenfolge für Tastatur und Screenreader behalten

Starte von einer lesbaren Desktop- (oder Mobile-first-) Flex-Basis. An einem klaren Breakpoint ändere nur, was sich ändern muss — Wrap, Richtung oder Basis — nicht jede Eigenschaft auf einmal.

flex-wrap — der Zeile Luft geben

Wenn Karten auf breiten Screens in einer Reihe sitzen und statt endlosem Quetschen umbrechen sollen, aktiviere Wrap und gib jeder Karte eine sinnvolle Basis.

Wrapping card row

css

.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

Richtungswechsel am Breakpoint

Klassisches Muster: nebeneinander auf breiten Viewports, gestapelte Spalte auf schmalen. Ändere flex-direction in einer Media Query — behalte dasselbe HTML.

Stack on small screens

css

.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

Basis und min-width für den Reflow

Kombiniere Wrap mit flex-basis oder min-width, damit Items entscheiden, wann sie abfallen. Ein Breakpoint kann die Basis auch zurücksetzen, wenn eine Größe nie sauber umbricht.

Basis at a breakpoint

css

.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

Schmale Viewports sind keine andere Layout-Sprache — dieselben Flex-Werkzeuge, andere Werte. Ändere Richtung oder Wrap; erfinde keinen zweiten HTML-Baum.

Eine ruhige Gewohnheit für responsives Flex

Zuerst ein primärer Breakpoint. Bevorzuge Wrap und Richtungswechsel gegenüber order-Umschichtungen. Halte die Quellreihenfolge sinnvoll. Fluid Images, komplexe Breakpoint-Systeme und volle Responsive-Theorie gehören in spätere Lektionen.

Named stack roles

css

.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

Min-width wrap guard

css

.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

Selbst ausprobieren

Baue eine Kartenreihe mit flex-wrap: wrap und flex: 1 1 14rem.
Drehe eine Shell unter max-width: 40rem auf flex-direction: column.
Setze Toolbar-Aktionen an einem kleinen Breakpoint auf flex-basis: 100%.
Gib Chips min-width, damit sie umbrechen statt zu zerquetschen.
Widerstehe dem Impuls, order für responsives Layout zu missbrauchen.

Typische Fehler

Items ewig nur schrumpfen statt zu wrappen oder zu stapeln
order als responsives Layout-Werkzeug nutzen und die Tab-Reihenfolge ruinieren
flex-wrap vergessen und sich wundern, warum Karten nie abfallen
Jede Flex-Eigenschaft in eine riesige Media Query werfen
Diese Lektion für den gesamten Responsive-Design-Kurs halten

Kurzfassung

Responsives Flex passt Wrap, Richtung und Basis über Breiten an
flex-wrap plus sinnvolle Basis/min-width lässt Zeilen umfließen
Media Queries drehen flex-direction, um auf schmalen Screens zu stapeln
Bevorzuge ruhige Breakpoints; meide order für Layout-Tricks
Tiefere Responsive- und Media-Queries-Module folgen später

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 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

Sprache