Lädt...

CSS Flex-Items

Flex Container steuert den Eltern-Container. Flex-Items beantworten eine andere Frage: Wie wächst, schrumpft und startet jedes Kind mit einer Größe in dieser Zeile oder Spalte? Meister basis, grow und shrink, bevor du responsive Flex-Muster jagst.

Ein Werkzeugkasten für Flex-Items

📊 Flex-Items auf einen Blick

Eigenschaft	Alltagseinsatz
`flex-basis`	Startgröße auf der Hauptachse, bevor freier Platz verteilt wird
`flex-grow`	Wie viel Restplatz dieses Item beansprucht (einheitenloser Faktor)
`flex-shrink`	Wie bereitwillig dieses Item schrumpft, wenn der Platz knapp ist
`flex`	Kurzform für grow, shrink und basis
`align-self`	Überschreibt das `align-items` des Containers für ein Item
`order`	Ändert die visuelle Reihenfolge (sparsam nutzen — DOM/Barrierefreiheit im Blick behalten)

Stell dir basis als bevorzugte Startlänge des Items auf der Hauptachse vor. Grow und shrink verhandeln danach den restlichen freien oder fehlenden Platz.

flex-grow — Restplatz einnehmen

Ein Faktor von 1 lässt ein Item in freien Platz wachsen. Geschwister-Faktoren konkurrieren: Zwei Items mit flex-grow: 1 teilen den Rest gleichmäßig.

Growing main column

css

.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — von einer Größe starten

flex-basis setzt die Startgröße auf der Hauptachse vor der Grow-/Shrink-Rechnung. Bevorzuge basis für den Flex-Algorithmus; width/height zählen weiter, aber basis ist der flex-eigene Startpunkt.

Sidebar with basis

css

.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — Platz zurückgeben

Wenn die Zeile zu eng wird, entscheiden Shrink-Faktoren, wer komprimiert. flex-shrink: 0 schützt Icons oder feste Schienen vor dem Zerquetschen.

Protect from squash

css

.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

Die flex-Kurzform

flex: grow shrink basis bündelt das Trio. Ruhige Defaults: flex: 1 (wachsen, Schrumpfen erlauben, basis auto) für ein füllendes Kind; flex: 0 0 auto für einen starren Chip.

Flex shorthand

css

.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — ein Item, andere Querausrichtung

Überschreibe das align-items des Containers für ein einzelnes Kind. Nützlich, wenn ein Badge am Start kleben soll, während Geschwister zentriert bleiben.

Align-self override

css

.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

Eine ruhige Flex-Item-Gewohnheit

Zuerst basis für die gewünschte Größe, dann Grow-/Shrink-Faktoren, dann Kurzform zum Aufräumen. Nutze align-self sparsam. Vermeide order-Tricks, die Tastatur- und Screenreader-Fluss durcheinanderbringen — und lass Media-Query-Flex-Muster für Flex Responsive.

Named item roles

css

.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

Selbst ausprobieren

Baue eine Haupt- + Aside-Zeile; gib main flex-grow: 1.
Setze die Aside mit flex-basis: 14rem und flex-shrink: 0.
Schütze ein Icon mit flex-shrink: 0.
Schreibe grow/shrink/basis mit der flex-Kurzform neu.
Überschreibe die Querausrichtung eines Kindes mit align-self.

Häufige Fehler

flex-grow auf den Container statt auf ein Item setzen
width mit flex-basis verwechseln und sich wundern, warum die Flex-Rechnung abweicht
Mit order umsortieren und Tab-/Quellreihenfolge zerstören
Logos quetschen lassen, weil shrink beim Default blieb
Diese Lektion wie das Modul Flex Responsive behandeln

Zusammenfassung

Flex-Items steuern Wachstum, Schrumpfen und Start-basis
flex-grow teilt freien Platz; flex-shrink teilt den Druck
flex-basis ist die Flex-Startgröße auf der Hauptachse
flex-Kurzform und align-self verfeinern einzelne Kinder
Responsive Flex-Muster folgen als Nächstes; order mit Bedacht nutzen

🧠 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