Flexbox Ausrichtung

Zuletzt aktualisiert am 15. Februar 2026

Die Ausrichtung von Items ist die größte Stärke von Flexbox. Mit justify-content verteilst du Items entlang der Hauptachse, mit align-items richtest du sie auf der Querachse aus. Dazu kommt align-content für mehrzeilige Layouts und gap für saubere Abstände ohne Margin-Hacks. Dieser Artikel zeigt dir alle Ausrichtungsmöglichkeiten im Detail.

Grundlagen

Flexbox kennt zwei Achsen: Die Hauptachse (bestimmt durch flex-direction) und die Querachse (senkrecht dazu). Die Ausrichtungseigenschaften arbeiten immer relativ zu diesen Achsen:

• justify-content → Verteilung entlang der Hauptachse
• align-items → Ausrichtung entlang der Querachse (einzelne Zeile)
• align-content → Verteilung der Zeilen entlang der Querachse (nur bei flex-wrap: wrap)
• gap → Abstände zwischen den Items (nicht am Rand)

Bei flex-direction: row (Standard) ist die Hauptachse horizontal. Das heißt justify-content verteilt Items horizontal und align-items richtet sie vertikal aus. Bei flex-direction: column ist es genau umgekehrt.

Syntax & Werte

justify-content

align-items

align-content

gap, row-gap, column-gap

Beispiele

justify-content im Überblick

.container { display: flex; }

.start   { justify-content: flex-start; }
.center  { justify-content: center; }
.end     { justify-content: flex-end; }
.between { justify-content: space-between; }
.around  { justify-content: space-around; }
.evenly  { justify-content: space-evenly; }

<div class="demo">
<div class="label">flex-start</div>
<div class="flex-row jc-start">
  <div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>
<div class="label">center</div>
<div class="flex-row jc-center">
  <div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>
<div class="label">flex-end</div>
<div class="flex-row jc-end">
  <div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>
<div class="label">space-between</div>
<div class="flex-row jc-between">
  <div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>
<div class="label">space-around</div>
<div class="flex-row jc-around">
  <div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>
<div class="label">space-evenly</div>
<div class="flex-row jc-evenly">
  <div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>
</div>

align-items: Vertikale Ausrichtung

align-items richtet Items auf der Querachse aus. Der Effekt ist am deutlichsten, wenn die Items unterschiedliche Höhen haben.

.container { display: flex; height: 100px; }

.stretch { align-items: stretch; }   /* Standard */
.start   { align-items: flex-start; }
.center  { align-items: center; }
.end     { align-items: flex-end; }

<div class="demo">
<div class="example">
  <div class="example-label">stretch</div>
  <div class="flex-col ai-stretch">
    <div class="item">A</div>
    <div class="item">B</div>
  </div>
</div>
<div class="example">
  <div class="example-label">flex-start</div>
  <div class="flex-col ai-start">
    <div class="item">A</div>
    <div class="item item-tall">B</div>
  </div>
</div>
<div class="example">
  <div class="example-label">center</div>
  <div class="flex-col ai-center">
    <div class="item">A</div>
    <div class="item item-tall">B</div>
  </div>
</div>
<div class="example">
  <div class="example-label">flex-end</div>
  <div class="flex-col ai-end">
    <div class="item">A</div>
    <div class="item item-tall">B</div>
  </div>
</div>
</div>

gap statt margin

gap erzeugt Abstände nur zwischen den Items, nicht am äußeren Rand. Das ist sauberer als Margin, wo du den Abstand am letzten Element wieder entfernen musst.

/* Margin: Abstand auch am Rand */
.margin-approach .item {
  margin: 4px;
}

/* Gap: Nur zwischen den Items */
.gap-approach {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

<div class="demo">
<div class="label">Mit margin (ungleichmäßige Ränder)</div>
<div class="margin-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>
<div class="label">Mit gap (saubere Abstände)</div>
<div class="gap-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>
</div>

align-content bei mehrzeiligem Layout

align-content verteilt die Zeilen innerhalb des Containers. Diese Eigenschaft wirkt nur bei flex-wrap: wrap und wenn der Container höher ist als die Zeilen zusammen.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 140px;
}

.start   { align-content: flex-start; }
.center  { align-content: center; }
.between { align-content: space-between; }

<div class="demo">
<div class="example">
  <div class="example-label">flex-start</div>
  <div class="flex-wrap-box ac-start">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
    <div class="item">4</div><div class="item">5</div><div class="item">6</div>
  </div>
</div>
<div class="example">
  <div class="example-label">center</div>
  <div class="flex-wrap-box ac-center">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
    <div class="item">4</div><div class="item">5</div><div class="item">6</div>
  </div>
</div>
<div class="example">
  <div class="example-label">space-between</div>
  <div class="flex-wrap-box ac-between">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
    <div class="item">4</div><div class="item">5</div><div class="item">6</div>
  </div>
</div>
</div>

Barrierefreiheit

Die Ausrichtungseigenschaften in Flexbox ändern nur die visuelle Darstellung, nicht die semantische Struktur oder Lesereihenfolge. Das ist aus Sicht der Barrierefreiheit grundsätzlich unproblematisch, weil Screenreader und Tastaturnavigation der DOM-Reihenfolge folgen.

Ein Punkt zur Lesbarkeit: Bei align-items: center in Kombination mit sehr langen Texten kann es passieren, dass der Text schwerer zu lesen ist, weil die Zeilen optisch nicht an einer durchgehenden Kante ausgerichtet sind. Für Content-lastige Layouts ist flex-start oft die bessere Wahl.

Häufige Fehler

• align-content ohne flex-wrap: wrap: align-content hat keine Wirkung bei einzeiligen Layouts. Du brauchst flex-wrap: wrap und genug Höhe im Container, damit mehrere Zeilen entstehen.
• justify-content und align-items verwechseln: justify-content arbeitet auf der Hauptachse, align-items auf der Querachse. Bei flex-direction: column vertauschen sich die Achsen, was für Verwirrung sorgt.
• gap nicht für ältere Projekte: gap in Flexbox wird erst seit 2021 in allen Browsern unterstützt. Für ältere Browser-Anforderungen verwende margin als Fallback.
• space-between mit nur einem Item: Bei einem einzigen Item hat space-between keinen Effekt. Das Item sitzt am Anfang. Verwende center, wenn du ein einzelnes Item zentrieren willst.
• align-items: stretch wird durch feste Höhe verhindert: Wenn ein Flex-Item eine explizite height hat, wird stretch ignoriert. Entferne die feste Höhe oder verwende min-height stattdessen.

Browser-Kompatibilität

Alle Flexbox-Ausrichtungseigenschaften werden von allen modernen Browsern vollständig unterstützt. gap in Flexbox ist seit 2021 universell verfügbar.

Email-Kompatibilität

Flexbox-Ausrichtung 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