Flexbox Ausrichtung

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.

Steckbrief Flexbox Ausrichtung

Syntax: justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly
Initialwert: (variiert je Eigenschaft)
Vererbt: Nein
Animierbar: Nein

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

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

20 Werte

justify-content

Wert	Beschreibung	Beispiel
`flex-start`	Items werden am Anfang der Hauptachse ausgerichtet (Standard).	justify-content: flex-start
`center`	Items werden in der Mitte der Hauptachse zentriert.	justify-content: center
`flex-end`	Items werden am Ende der Hauptachse ausgerichtet.	justify-content: flex-end
`space-between`	Gleichmäßiger Abstand zwischen den Items. Erstes und letztes Item liegen am Rand.	justify-content: space-between
`space-around`	Gleichmäßiger Abstand um jedes Item. Die Ränder haben halben Abstand.	justify-content: space-around
`space-evenly`	Komplett gleichmäßiger Abstand zwischen allen Items und den Rändern.	justify-content: space-evenly

align-items

Wert	Beschreibung	Beispiel
`stretch`	Items werden auf die volle Höhe des Containers gestreckt (Standard).	align-items: stretch
`flex-start`	Items werden am Anfang der Querachse ausgerichtet (oberer Rand).	align-items: flex-start
`center`	Items werden in der Mitte der Querachse zentriert.	align-items: center
`flex-end`	Items werden am Ende der Querachse ausgerichtet (unterer Rand).	align-items: flex-end
`baseline`	Items werden an ihrer Text-Grundlinie ausgerichtet.	align-items: baseline

align-content

Wert	Beschreibung	Beispiel
`stretch`	Zeilen werden gestreckt, um den Container zu füllen (Standard).	align-content: stretch
`flex-start`	Zeilen werden am Anfang der Querachse gepackt.	align-content: flex-start
`center`	Zeilen werden in der Mitte der Querachse zentriert.	align-content: center
`flex-end`	Zeilen werden am Ende der Querachse gepackt.	align-content: flex-end
`space-between`	Gleichmäßiger Abstand zwischen den Zeilen.	align-content: space-between
`space-around`	Gleichmäßiger Abstand um jede Zeile.	align-content: space-around

gap, row-gap, column-gap

Wert	Beschreibung	Beispiel
`<length>`	Fester Abstand zwischen den Items (z.B. 16px, 1rem).	gap: 16px
`<length> <length>`	Erster Wert ist row-gap, zweiter ist column-gap.	gap: 16px 8px
`<percentage>`	Prozentualer Abstand relativ zur Container-Größe.	gap: 5%

Beispiele

4 Beispiele

Alle justify-content Werte

.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 richtet Items auf der Querachse aus. Der Effekt ist am deutlichsten, wenn die Items unterschiedliche Höhen haben.

align-items Werte

.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 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.

gap vs. margin

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

align-content (nur mit flex-wrap)

.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

5 Fehler

01 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.

02 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.

03 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.

04 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.

05 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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.

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