Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >justify-content

justify-content

justify-content: normal | flex-start | flex-end | center | space-between | space-around | space-evenly | start | end

Verteilt die Elemente eines Flex-Containers auf der Hauptachse (bei flex-direction: row waagerecht) – sie teilt den freien Platz auf, den die Elemente übrig lassen. Im Grid verteilt sie auf dieselbe Weise ganze Rasterspalten.

Werte

  • normal – Standard: in Flexbox wie flex-start, im Grid wie stretch.
  • flex-start / start – am Anfang; flex-end / end – am Ende. (Der Unterschied zeigt sich nur bei umgekehrter Richtung: flex-start folgt der Flexbox-Richtung, start der Textrichtung.)
  • center – in der Mitte.
  • space-between – das erste am Anfang, das letzte am Ende, gleiche Abstände dazwischen.
  • space-around – gleicher Raum um jedes Element (an den Rändern also halb so viel).
  • space-evenly – alle Abstände einschließlich der Ränder gleich.

Vor den Wert können Sie safe schreiben (safe center): Passen die Elemente nicht hinein, richten sie sich am Anfang aus, damit sie nicht außerhalb des sichtbaren Bereichs landen.

Initialwert: normal. Vererbt: nein. Gilt für: Flex- und Grid-Container (und mehrspaltiger Text).

Beispiele

Drei Elemente mit verschiedenen Werten:

<div class="flex start"><div>1</div><div>2</div><div>3</div></div>
<div class="flex center"><div>1</div><div>2</div><div>3</div></div>
<div class="flex end"><div>1</div><div>2</div><div>3</div></div>
<div class="flex between"><div>1</div><div>2</div><div>3</div></div>
<div class="flex around"><div>1</div><div>2</div><div>3</div></div>
<div class="flex evenly"><div>1</div><div>2</div><div>3</div></div>

.flex {
  display: flex;
  padding: 6px;
  border: 2px dashed #999;
}
.flex > div {
  padding: 6px 10px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.flex { max-width: 300px; margin-bottom: 6px; }
.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; }
Ergebnis
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

Ein Kopfbereich mit dem Logo links und dem Menü rechts:

<header class="header">
  <strong>Logo</strong>
  <nav>Start · Artikel · Kontakt</nav>
</header>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 340px;
  padding: 8px 12px;
  background: #333;
  color: #fff;
}
Ergebnis
Logo

Worauf Sie achten sollten

  • Sie wirkt nur auf freien Platz. Haben die Elemente flex-grow und verbrauchen den Platz, gibt es nichts zu verteilen und der Wert hat keine Wirkung.
  • Um ein Element ans Ende der Zeile zu schieben (die übrigen am Anfang), ist margin-left: auto an diesem Element besser.
  • center schiebt die Elemente bei Überlauf auch nach links aus dem Container, wo man nicht zu ihnen scrollen kann. safe center hilft.
  • In der letzten Zeile mit Umbruch erzeugt space-between „Löcher“ (zwei Elemente an den Rändern). Für ein Raster gleicher Karten ist Grid oder gap mit flex-start besser.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit September 2015, gilt als weithin verfügbar seit März 2018. Ab Version: Chrome 29, Firefox 20, Safari 9. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
align-items
place-content
gap
flex-direction
margin