Flexbox Container

Zuletzt aktualisiert am 15. Februar 2026

Flexbox ist das meistgenutzte Layout-System in CSS. Mit display: flex verwandelst du ein Element in einen Flex-Container, dessen Kinder sich automatisch nebeneinander anordnen. Im Gegensatz zu Floats oder Inline-Block brauchst du keine Hacks: Flexbox gibt dir volle Kontrolle über Richtung, Umbruch und Reihenfolge. In diesem Artikel lernst du die Container-Eigenschaften flex-direction, flex-wrap und die Shorthand flex-flow.

Grundlagen

Wenn du display: flex auf ein Element setzt, passieren drei Dinge: Die direkten Kinder werden zu Flex-Items, sie ordnen sich standardmäßig in einer Zeile nebeneinander an, und sie schrumpfen bei Bedarf, damit alles in eine Zeile passt.

Das Besondere an Flexbox ist das Konzept von Achsen. Die Hauptachse (main axis) bestimmt die Richtung, in der die Items fließen. Die Querachse (cross axis) steht senkrecht dazu. flex-direction legt die Hauptachse fest, und alle Ausrichtungseigenschaften beziehen sich auf diese Achsen.

display: flex erzeugt einen Block-Level-Container. Wenn du einen Inline-Container brauchst (z.B. in einem Textfluss), verwende display: inline-flex.

Haupt- und Querachse

Das Achsen-Konzept ist das Fundament von Flexbox. Wenn du flex-direction: row setzt (Standard), läuft die Hauptachse horizontal von links nach rechts. Die Querachse läuft vertikal von oben nach unten. Bei flex-direction: column dreht sich alles: Die Hauptachse geht vertikal, die Querachse horizontal.

Das ist wichtig, weil justify-content immer entlang der Hauptachse arbeitet und align-items entlang der Querachse. Bei row ist justify-content also horizontal, bei column vertikal.

Syntax & Werte

flex-direction

flex-wrap

flex-flow (Shorthand)

Beispiele

flex vs. inline-flex

display: flex erzeugt einen Block-Container (nimmt die volle Breite ein), display: inline-flex erzeugt einen Inline-Container (nur so breit wie nötig).

/* Block-Container: volle Breite */
.flex-container {
  display: flex;
  gap: 8px;
}

/* Inline-Container: nur so breit wie nötig */
.inline-flex-container {
  display: inline-flex;
  gap: 8px;
}

<div class="demo">
<div class="label">display: flex (volle Breite)</div>
<div class="flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
<div class="label">display: inline-flex (nur so breit wie nötig)</div>
<div class="inline-flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
</div>

flex-direction: Achsen wechseln

Mit flex-direction bestimmst du, ob die Items horizontal oder vertikal angeordnet werden.

/* Horizontal (Standard) */
.row { display: flex; flex-direction: row; }

/* Vertikal */
.column { display: flex; flex-direction: column; }

<div class="demo">
<div class="example">
  <div class="example-label">flex-direction: row</div>
  <div class="row-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>
<div class="example">
  <div class="example-label">flex-direction: column</div>
  <div class="column-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>
</div>

flex-wrap: Umbruchverhalten

Ohne flex-wrap quetschen sich alle Items in eine Zeile. Mit wrap brechen sie bei Bedarf in die nächste Zeile um.

/* Items werden gestaucht (Standard) */
.nowrap { display: flex; flex-wrap: nowrap; }

/* Items brechen in die nächste Zeile um */
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }

<div class="demo">
<div class="label">flex-wrap: nowrap (Standard), Items werden gestaucht</div>
<div class="nowrap-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
<div class="label">flex-wrap: wrap, Items brechen um</div>
<div class="wrap-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
</div>

flex-flow Shorthand

flex-flow kombiniert flex-direction und flex-wrap in einer Zeile.

.container {
  display: flex;
  flex-flow: column wrap;
  height: 140px;
  gap: 8px;
}

/* Entspricht: */
/* flex-direction: column; */
/* flex-wrap: wrap; */

<div class="demo">
<div class="flow-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>
</div>

Barrierefreiheit

Wichtig: flex-direction: row-reverse und column-reverse ändern nur die visuelle Reihenfolge der Items, nicht die DOM-Struktur. Screenreader und Tastaturnavigation folgen weiterhin der HTML-Reihenfolge. Das bedeutet: Was du siehst, ist nicht unbedingt das, was ein Screenreader vorliest oder wie ein Tastaturnutzer durch die Seite navigiert.

WCAG 1.3.2 (Meaningful Sequence) verlangt, dass die logische Lesereihenfolge mit der visuellen Reihenfolge übereinstimmt. Wenn du row-reverse oder column-reverse einsetzt, überprüfe immer, ob die Tab-Reihenfolge noch Sinn ergibt. Nutze diese Eigenschaften nur für dekorative Layouts, nie für semantisch wichtige Inhalte wie Navigationen oder Formulare.

Auch flex-wrap: wrap kann die visuelle Reihenfolge verändern, wenn Items in die nächste Zeile umbrechen. Stelle sicher, dass die DOM-Reihenfolge in allen Viewport-Breiten logisch bleibt.

Häufige Fehler

• Flexbox auf das falsche Element setzen: display: flex wirkt nur auf die direkten Kinder. Wenn du ein Enkelelement ausrichten willst, musst du auch dessen Elternelement zum Flex-Container machen.
• Flex-Items schrumpfen unerwartet: Standardmäßig haben Flex-Items flex-shrink: 1. Das heißt, sie schrumpfen, wenn der Platz knapp wird. Wenn du das nicht willst, setze flex-shrink: 0 oder min-width: 0.
• Vergessen, dass flex-wrap: nowrap der Standard ist: Wenn deine Items über den Container hinausragen oder gestaucht werden, liegt es meistens daran, dass flex-wrap nicht auf wrap gesetzt ist.
• Achsen-Verwirrung bei column: Bei flex-direction: column dreht sich alles. justify-content wirkt jetzt vertikal und align-items horizontal. Das überrascht viele Anfänger.
• inline-flex statt flex verwenden: inline-flex ist für Spezialfälle (z.B. Badges im Text). Für normale Layouts willst du fast immer display: flex.

Browser-Kompatibilität

Flexbox wird von allen modernen Browsern vollständig unterstützt. Es ist seit 2015 in allen relevanten Browsern stabil und kann bedenkenlos eingesetzt werden.

Email-Kompatibilität

Flexbox hat in HTML-Emails sehr eingeschränkten Support. Nur Apple Mail und Thunderbird unterstützen es vollständig. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

Verwandte Eigenschaften