Flex-Items

Die Container-Eigenschaften steuern das Layout als Ganzes, aber die echte Flexibilität kommt von den Item-Eigenschaften. Mit flex-grow und flex-shrink bestimmst du, wie Items den verfügbaren Platz aufteilen oder bei Platzmangel schrumpfen. flex-basis definiert die Ausgangsgröße, und die Shorthand flex fasst alles zusammen. Dazu kommen order für die visuelle Reihenfolge und align-self für individuelle Ausrichtung.

Steckbrief Flex-Items

Syntax: flex: <flex-grow> <flex-shrink> <flex-basis>
Initialwert: 0 1 auto
Vererbt: Nein
Animierbar: Ja
Kurzform für: flex-grow, flex-shrink, flex-basis

Kategorie: Flexbox
Werte: 22
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Grundlagen

Jedes direkte Kind eines Flex-Containers ist automatisch ein Flex-Item. Standardmäßig hat jedes Item flex: 0 1 auto. Das bedeutet: Es wächst nicht über seine natürliche Größe hinaus (flex-grow: 0), es schrumpft bei Bedarf (flex-shrink: 1), und seine Ausgangsgröße basiert auf dem Inhalt (flex-basis: auto).

Die flex Shorthand ist der empfohlene Weg, diese drei Werte zu setzen. Sie ist nicht nur kürzer, sondern setzt auch clevere Standardwerte: flex: 1 wird zu flex: 1 1 0%, nicht zu flex: 1 1 auto. Das ist ein wichtiger Unterschied, den du verstehen solltest.

Syntax & Werte

22 Werte

flex-grow

Wert	Beschreibung	Beispiel
`0`	Item wächst nicht über seine natürliche Größe hinaus (Standard).	flex-grow: 0
`<number>`	Positive Zahl. Gibt den Anteil am verfügbaren Platz an, den das Item beansprucht.	flex-grow: 1

flex-shrink

Wert	Beschreibung	Beispiel
`1`	Item schrumpft proportional, wenn der Platz knapp wird (Standard).	flex-shrink: 1
`0`	Item schrumpft nicht und behält seine Basis-Größe.	flex-shrink: 0
`<number>`	Positive Zahl. Höhere Werte bedeuten stärkeres Schrumpfen.	flex-shrink: 2

flex-basis

Wert	Beschreibung	Beispiel
`auto`	Die Größe basiert auf width/height oder dem Inhalt des Items (Standard).	flex-basis: auto
`0`	Keine Basisgröße. Der gesamte Platz wird über flex-grow verteilt.	flex-basis: 0
`<length>`	Feste Basisgröße (z.B. 200px, 20rem).	flex-basis: 200px
`<percentage>`	Prozentual zur Größe des Flex-Containers.	flex-basis: 50%
`content`	Basiert auf dem Inhalt des Items (wie auto ohne gesetzte width).	flex-basis: content

flex (Shorthand)

Wert	Beschreibung	Beispiel
`flex: 1`	Entspricht flex: 1 1 0%. Item teilt verfügbaren Platz gleichmäßig.	flex: 1
`flex: auto`	Entspricht flex: 1 1 auto. Item wächst ab seiner natürlichen Größe.	flex: auto
`flex: none`	Entspricht flex: 0 0 auto. Item ist starr und ändert seine Größe nicht.	flex: none
`flex: <grow> <shrink> <basis>`	Volle Kontrolle über alle drei Werte.	flex: 2 1 200px

order

Wert	Beschreibung	Beispiel
`0`	Standard-Reihenfolge (wie im HTML-Quellcode).	order: 0
`<integer>`	Items mit niedrigerem Wert erscheinen zuerst. Negative Werte sind erlaubt.	order: -1

align-self

Wert	Beschreibung	Beispiel
`auto`	Übernimmt den Wert von align-items des Containers (Standard).	align-self: auto
`flex-start`	Item wird am Anfang der Querachse ausgerichtet.	align-self: flex-start
`center`	Item wird in der Mitte der Querachse zentriert.	align-self: center
`flex-end`	Item wird am Ende der Querachse ausgerichtet.	align-self: flex-end
`stretch`	Item wird auf die volle Höhe der Querachse gestreckt.	align-self: stretch
`baseline`	Item wird an der Textgrundlinie ausgerichtet.	align-self: baseline

Beispiele

4 Beispiele

flex-grow bestimmt, wie der verfügbare Platz auf die Items aufgeteilt wird. Die Zahlen sind Verhältnisse: Ein Item mit flex-grow: 2 bekommt doppelt so viel Extra-Platz wie eines mit flex-grow: 1.

flex-grow Proportionen

/* Kein Wachstum (Standard) */
.no-grow { flex-grow: 0; }

/* Gleichmäßig verteilt */
.equal { flex-grow: 1; }

/* B bekommt doppelt so viel Extra-Platz */
.a { flex-grow: 1; }
.b { flex-grow: 2; }
.c { flex-grow: 1; }

<div class="demo">
<div class="label">Alle flex-grow: 0 (Standard)</div>
<div class="flex-row">
  <div class="item grow-0">A</div>
  <div class="item grow-0">B</div>
  <div class="item grow-0">C</div>
</div>
<div class="label">Alle flex-grow: 1 (gleichmäßig)</div>
<div class="flex-row">
  <div class="item grow-1">A</div>
  <div class="item grow-1">B</div>
  <div class="item grow-1">C</div>
</div>
<div class="label">A=1, B=2, C=1 (B bekommt doppelt)</div>
<div class="flex-row">
  <div class="item grow-1">A (1)</div>
  <div class="item grow-2">B (2)</div>
  <div class="item grow-1">C (1)</div>
</div>
</div>

Die drei wichtigsten flex Patterns, die du kennen musst:

flex: 1 vs. auto vs. none

/* Gleiche Breite (Basisgröße 0) */
.equal { flex: 1; }      /* = flex: 1 1 0% */

/* Wachsen ab natürlicher Größe */
.grow { flex: auto; }    /* = flex: 1 1 auto */

/* Starr, keine Flex-Anpassung */
.fixed { flex: none; }   /* = flex: 0 0 auto */

<div class="demo">
<div class="label">flex: 1 (gleiche Breite, Inhalt ignoriert)</div>
<div class="flex-row row-1">
  <div class="item item-blue flex-1">Kurz</div>
  <div class="item item-blue flex-1">Etwas längerer Text</div>
  <div class="item item-blue flex-1">X</div>
</div>
<div class="label">flex: auto (wachsen ab natürlicher Breite)</div>
<div class="flex-row row-auto">
  <div class="item item-green flex-auto">Kurz</div>
  <div class="item item-green flex-auto">Etwas längerer Text</div>
  <div class="item item-green flex-auto">X</div>
</div>
<div class="label">flex: none (starr, keine Änderung)</div>
<div class="flex-row row-none">
  <div class="item item-purple flex-none">Kurz</div>
  <div class="item item-purple flex-none">Etwas längerer Text</div>
  <div class="item item-purple flex-none">X</div>
</div>
</div>

order ändert die visuelle Reihenfolge der Items, ohne das HTML zu verändern. Achtung: Die Tab-Reihenfolge für Tastaturnutzer bleibt beim HTML-Quellcode. Verwende order daher nur für dekorative Zwecke.

order für visuelle Reihenfolge

/* Standard: HTML-Reihenfolge */
.item { order: 0; }

/* Nach vorne schieben */
.first { order: -1; }

/* Nach hinten schieben */
.last { order: 1; }

<div class="demo">
<div class="label">HTML-Reihenfolge: A, B, C</div>
<div class="flex-row">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
<div class="label">C nach vorne (order: -1), A nach hinten (order: 1)</div>
<div class="flex-row">
  <div class="item order-last">A (order: 1)</div>
  <div class="item">B (order: 0)</div>
  <div class="item order-first">C (order: -1)</div>
</div>
</div>

align-self überschreibt align-items für ein einzelnes Item. Damit kannst du ein bestimmtes Item anders positionieren als den Rest.

align-self überschreibt align-items

.container {
  display: flex;
  align-items: flex-start;
  height: 120px;
}

.center  { align-self: center; }
.end     { align-self: flex-end; }
.stretch { align-self: stretch; }

<div class="demo">
<div class="flex-row">
  <div class="item">Standard (flex-start)</div>
  <div class="item self-center">align-self: center</div>
  <div class="item self-end">align-self: flex-end</div>
  <div class="item self-stretch">align-self: stretch</div>
</div>
</div>

Barrierefreiheit

WICHTIG: Die order-Eigenschaft ist aus Barrierefreiheitssicht kritisch. Sie trennt die visuelle Reihenfolge von der DOM-Reihenfolge. Screenreader und Tastaturnavigation folgen der HTML-Struktur, nicht der visuellen Anordnung durch order. Das verletzt WCAG 1.3.2 (Meaningful Sequence).

Beispiel: Wenn du drei Buttons in der HTML-Reihenfolge A → B → C hast, aber mit order visuell zu C → A → B umsortierst, sehen Nutzer eine Reihenfolge, die Tastaturnutzer nicht erleben. Das ist verwirrend und problematisch.

Regel: Verwende order nur für rein dekorative Umordnungen, die keine inhaltliche Relevanz haben. Für semantisch wichtige Reihenfolgen (z.B. Formulare, Navigationen, Call-to-Actions) musst du die HTML-Struktur direkt anpassen.

Zusätzlich: flex-shrink kann dazu führen, dass Text zu klein wird, um lesbar zu bleiben. Setze min-width oder min-height, um sicherzustellen, dass Inhalte auf kleineren Bildschirmen nicht unleserlich werden.

Häufige Fehler

5 Fehler

01 flex: 1 und flex: 1 1 auto verwechseln

flex: 1 setzt flex-basis auf 0%, nicht auf auto. Das bedeutet, alle Items starten bei 0 und teilen den gesamten Platz gleichmäßig. Bei flex: auto starten sie bei ihrer natürlichen Größe und teilen nur den restlichen Platz.

02 flex-basis und width gleichzeitig setzen

flex-basis hat Vorrang vor width (bzw. height bei Column-Layouts). Wenn beides gesetzt ist, wird width ignoriert. Verwende nur eines von beiden.

03 order für Zugänglichkeit missbrauchen

order ändert nur die visuelle Reihenfolge. Screenreader und Tab-Navigation folgen weiterhin dem HTML. Wenn die logische Reihenfolge anders sein soll, ändere das HTML.

04 Negative flex-grow Werte

flex-grow akzeptiert nur positive Zahlen und 0. Negative Werte sind ungültig und werden ignoriert.

05 flex-shrink: 0 vergessen bei festen Breiten

Wenn ein Item eine feste flex-basis oder width haben soll, die nicht schrumpfen darf, setze flex-shrink: 0. Ohne das schrumpft das Item trotzdem, wenn der Platz knapp wird.

Browser-Kompatibilität

5 von 5

Alle Flex-Item-Eigenschaften werden von allen modernen Browsern vollständig unterstützt. Die flex-Shorthand ist seit 2015 universell verfügbar.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

Flex-Item-Eigenschaften haben in HTML-Emails sehr eingeschränkten Support. Nur Apple Mail und Thunderbird unterstützen sie vollständig. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

Apple Mail

Komplett
Gmail

Keine

Flexbox wird komplett ignoriert
Outlook

Keine

Kein Flexbox-Support, Tabellen-Layouts verwenden
Thunderbird

Komplett
Yahoo Mail

Keine

Kein Flexbox-Support

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da