Flex-Items

Zuletzt aktualisiert am 15. Februar 2026

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.

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

flex-grow

flex-shrink

flex-basis

flex (Shorthand)

order

align-self

Beispiele

flex-grow: Platz verteilen

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.

/* 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>

flex: 1 vs. flex: auto vs. flex: none

Die drei wichtigsten flex Patterns, die du kennen musst:

/* 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: Visuelle Reihenfolge ändern

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.

/* 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: Einzelnes Item anders ausrichten

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

.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

• 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.
• 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.
• 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.
• Negative flex-grow Werte: flex-grow akzeptiert nur positive Zahlen und 0. Negative Werte sind ungültig und werden ignoriert.
• 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

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

Email-Kompatibilität

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.

Verwandte Eigenschaften