Ausführbare CSS-Docs: Justify Content

Q: Was ist der Unterschied zwischen justify-content und align-items?

justify-content verteilt Items entlang der Hauptachse, der Richtung, in der sie fließen (horizontal bei flex-direction: row). align-items positioniert sie entlang der Querachse (vertikal bei einer Zeile). In einer Spalte tauschen beide: justify-content wird vertikal.

Q: Was ist der Unterschied zwischen space-between, space-around und space-evenly?

space-between lässt vor dem ersten und nach dem letzten Item keinen Platz und verteilt den Rest zwischen den Items. space-around gibt jedem Item auf beiden Seiten gleich viel Platz, sodass die Ränder eine halbe Lücke bekommen. space-evenly macht jede Lücke gleich groß, auch an den Rändern.

Q: Was macht align-self?

align-self überschreibt das align-items des Containers für ein einzelnes Item. Zum Beispiel schiebt align-self: flex-end an einem Kind nur dieses Kind ans Ende der Querachse, während die anderen bleiben, wo align-items sie hingesetzt hat.

Q: Gibt es in Flexbox justify-self?

Nein. Flexbox ignoriert justify-self, weil sich alle Items die Hauptachse teilen. Um ein Item entlang der Hauptachse zu schieben, nimm ein auto-Margin, etwa margin-inline-start: auto. justify-self funktioniert in Grid.

justify-content und align-items in je einem Satz

In einem Flex-Container verteilt justify-content die Items entlang der Hauptachse (quer durch die Zeile), und align-items richtet sie auf der Querachse aus (hoch und runter in der Zeile). Beide gehören an den Container:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center both ways</title>
  <style>
    .box {
      display: flex;
      justify-content: center; /* horizontal, in a row */
      align-items: center;     /* vertical, in a row */
      height: 140px;
      background: #e5e7eb;
    }
    .item { background: #2563eb; color: white; padding: 12px 18px; }
  </style>
</head>
<body>
  <div class="box"><div class="item">Centered</div></div>
</body>
</html>

Die Box ist in beide Richtungen zentriert: gleich weit vom Anfangs- und Endrand und von oben und unten entfernt. Nimm height: 140px weg, und align-items: center hat nichts zu tun, weil der Container auf die eigene Höhe des Items schrumpft.

Jeder Wert von justify-content, nachgemessen

Jede Zeile unten besteht aus denselben drei Items mit einem anderen justify-content. Die Zahlen im Label über jeder Zeile sind die Lücken, die der Browser gelassen hat: vor dem ersten Item, zwischen den Items und nach dem letzten.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>justify-content values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; width: 420px; background: #e5e7eb; margin: 2px 0 10px; }
    .row div { width: 60px; height: 28px; background: #2563eb; }
    .row div:nth-child(2) { background: #16a34a; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="list"></div>
  <script>
    const values = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
    const list = document.getElementById('list');
    values.forEach((v) => {
      const label = document.createElement('code');
      const row = document.createElement('div');
      row.className = 'row';
      row.style.justifyContent = v;
      row.innerHTML = '<div></div><div></div><div></div>';
      list.append(label, row);
      const b = row.getBoundingClientRect();
      const r = [...row.children].map((c) => c.getBoundingClientRect());
      const gaps = [r[0].left - b.left, r[1].left - r[0].right, r[2].left - r[1].right, b.right - r[2].right];
      label.textContent = 'justify-content: ' + v + '   gaps: ' + gaps.map(Math.round).join(' / ');
    });
  </script>
</body>
</html>

Der Container ist 420px breit, und die Items belegen 180px, also bleiben 240px freier Platz. Wohin er geht:

Wert	Freier Platz geht	Lücken in der Demo
`flex-start` (und `start`)	ganz hinter die Items	0 / 0 / 0 / 240
`center`	halb davor, halb dahinter	120 / 0 / 0 / 120
`flex-end` (und `end`)	ganz vor die Items	240 / 0 / 0 / 0
`space-between`	nur zwischen die Items	0 / 120 / 120 / 0
`space-around`	gleich viel auf beide Seiten jedes Items, die Ränder bekommen also die Hälfte	40 / 80 / 80 / 40
`space-evenly`	jede Lücke gleich groß, Ränder inklusive	60 / 60 / 60 / 60

flex-start folgt der Flex-Richtung und start der Schreibrichtung. Sie unterscheiden sich nur bei row-reverse oder column-reverse, wo flex-start am umgekehrten Ende liegt.

Jeder Wert von align-items

align-items wirkt quer zur Zeile. Die Items unten haben unterschiedliche Höhen, damit du siehst, was jeder Wert mit ihnen macht:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-items values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .row { display: flex; gap: 4px; width: 170px; height: 100px; background: #e5e7eb; }
    .row div { width: 50px; background: #2563eb; color: white; }
    .row div:nth-child(1) { font-size: 26px; }
    .row div:nth-child(2) { background: #16a34a; padding-top: 20px; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid" id="grid"></div>
  <script>
    ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'].forEach((v) => {
      const cell = document.createElement('div');
      cell.innerHTML = '<code>align-items: ' + v + '</code><div class="row" style="align-items: ' + v + '"><div>Ag</div><div>Ag</div><div>Ag</div></div>';
      document.getElementById('grid').append(cell);
    });
  </script>
</body>
</html>

Wert	Was auf der Querachse passiert
`stretch` (der Standard)	Items ohne festgelegte Höhe wachsen, bis sie den Container füllen
`flex-start` (und `start`)	Items sitzen oben, in ihrer eigenen Höhe
`center`	Items sind zentriert, in ihrer eigenen Höhe
`flex-end` (und `end`)	Items sitzen unten
`baseline`	Items verschieben sich so, dass die ersten Textzeilen eine gemeinsame Grundlinie haben

In der baseline-Box stehen die drei „Ag“-Labels auf einer Linie, obwohl das erste größer ist und das zweite Padding darüber hat. Das ist der Wert für eine Zeile, die eine große Überschrift mit kleinem Text mischt, oder ein Label mit einem Eingabefeld.

Zum Ausrichten klicken

Klick auf eine beliebige Zelle des 3 mal 3 Rasters. Die Box wandert dorthin, und darunter steht das CSS, das sie dorthin setzt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alignment picker</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .wrap { display: flex; gap: 16px; align-items: flex-start; }
    .picker { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
    .picker button { height: 28px; border: 1px solid #111827; background: white; cursor: pointer; }
    .picker button[aria-pressed="true"] { background: #2563eb; }
    #stage { display: flex; width: 260px; height: 150px; background: #e5e7eb; }
    .item { background: #16a34a; color: white; padding: 10px 14px; }
    pre { background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="picker" id="picker"></div>
    <div id="stage"><div class="item">Box</div></div>
  </div>
  <pre id="out"></pre>
  <script>
    const spots = ['flex-start', 'center', 'flex-end'];
    const stage = document.getElementById('stage');
    const pick = (row, col, btn) => {
      stage.style.alignItems = spots[row];
      stage.style.justifyContent = spots[col];
      document.querySelectorAll('.picker button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
      document.getElementById('out').textContent =
        '.stage {\n  display: flex;\n  justify-content: ' + spots[col] + ';\n  align-items: ' + spots[row] + ';\n}';
    };
    spots.forEach((_, row) => spots.forEach((_, col) => {
      const btn = document.createElement('button');
      btn.setAttribute('aria-label', 'row ' + (row + 1) + ', column ' + (col + 1));
      btn.addEventListener('click', () => pick(row, col, btn));
      document.getElementById('picker').append(btn);
    }));
    pick(1, 1, document.querySelectorAll('.picker button')[4]);
  </script>
</body>
</html>

Die Zeilen des Auswahlrasters ändern align-items, die Spalten justify-content. Die mittlere Zelle ist das klassische „div zentrieren“.

In einer Spalte tauschen die beiden

justify-content folgt immer der Hauptachse. Mit flex-direction: column ist die Hauptachse vertikal, also bewegt justify-content Items hoch und runter und align-items quer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Column axes</title>
  <style>
    .col {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* now vertical: pushed to the bottom */
      align-items: center;       /* now horizontal: centered */
      height: 160px;
      background: #e5e7eb;
    }
    .col div { background: #2563eb; color: white; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="col"><div>One</div><div>Two</div></div>
</body>
</html>

Wenn du sie verwechselst, tausch die beiden Eigenschaften, statt das Layout neu zu schreiben.

align-self und auto-Margins: nur ein Item

align-self an einem Item überschreibt align-items für dieses Item. In Flexbox gibt es kein justify-self; um ein Item entlang der Hauptachse zu verschieben, gib ihm ein auto-Margin, das den ganzen freien Platz auf dieser Seite nimmt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-self</title>
  <style>
    .bar { display: flex; align-items: flex-start; gap: 8px; height: 90px; background: #e5e7eb; }
    .bar div { background: #2563eb; color: white; padding: 8px 12px; }
    .bar .down { align-self: flex-end; background: #16a34a; }
    .bar .last { margin-inline-start: auto; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="bar">
    <div>Top</div>
    <div class="down">align-self: flex-end</div>
    <div class="last">margin-inline-start: auto</div>
  </div>
</body>
</html>

Das grüne Item rutscht allein nach unten, und das bernsteinfarbene wird ans andere Ende der Zeile geschoben, während die anderen am Anfang bleiben.

Bei mehreren Zeilen: align-content

align-items richtet Items innerhalb ihrer Zeile aus. Bricht ein Container auf mehrere Zeilen um, verteilt align-content die Zeilen selbst und nimmt dieselben Werte wie justify-content. In einem nowrap-Container bewirkt es nichts, weil dessen einzige Zeile immer die Höhe des Containers füllt. Die Seite zu flex-wrap zeigt es.

Häufige Fehler

Die Achsen verwechseln. justify-content ist die Flussrichtung, align-items quer dazu. In einer Spalte zentrierst du vertikal mit justify-content: center.
Kein freier Platz. Ein Item mit flex: 1 nimmt den ganzen Platz, also hat justify-content nichts zu verteilen. Dasselbe passiert, wenn der Container inline-flex und genau so breit wie seine Items ist.
Keine Höhe für align-items. Ein Container, der so hoch wie sein Inhalt ist, lässt nichts zum Ausrichten. Setz height oder min-height.
In Flexbox nach justify-self suchen. Dort wird es ignoriert. Nimm margin-inline-start: auto (oder margin-left: auto) am Item.
align-items: stretch, das nicht streckt. Ein Item mit eigener height behält sie. Entferne die Höhe (nimm min-height, wenn es ein Minimum braucht).
Die Eigenschaften an die Items setzen. Beide gehören an den Flex-Container. Nur align-self gehört an ein Item.

Häufig gestellte Fragen

Was ist der Unterschied zwischen justify-content und align-items?

justify-content verteilt Items entlang der Hauptachse, der Richtung, in der sie fließen (horizontal bei flex-direction: row). align-items positioniert sie entlang der Querachse (vertikal bei einer Zeile). In einer Spalte tauschen beide: justify-content wird vertikal.

Was ist der Unterschied zwischen space-between, space-around und space-evenly?

space-between lässt vor dem ersten und nach dem letzten Item keinen Platz und verteilt den Rest zwischen den Items. space-around gibt jedem Item auf beiden Seiten gleich viel Platz, sodass die Ränder eine halbe Lücke bekommen. space-evenly macht jede Lücke gleich groß, auch an den Rändern.

Warum funktioniert justify-content nicht?

Meist gibt es keinen freien Platz zum Verteilen: Ein Item hat flex-grow oder flex: 1, oder der Container ist nur so breit wie seine Items (zum Beispiel display: inline-flex oder ein gefloateter Container). Prüf auch, ob display: flex am Elternelement steht und nicht an den Items.

Warum zentriert align-items center nicht vertikal?

Wahrscheinlich ist der Container genau so hoch wie sein Inhalt, also gibt es nichts, worin zentriert werden kann. Gib dem Flex-Container eine Höhe oder min-height, und die Items rücken in seine Mitte.

Was macht align-self?

align-self überschreibt das align-items des Containers für ein einzelnes Item. Zum Beispiel schiebt align-self: flex-end an einem Kind nur dieses Kind ans Ende der Querachse, während die anderen bleiben, wo align-items sie hingesetzt hat.

Gibt es in Flexbox justify-self?

Nein. Flexbox ignoriert justify-self, weil sich alle Items die Hauptachse teilen. Um ein Item entlang der Hauptachse zu schieben, nimm ein auto-Margin, etwa margin-inline-start: auto. justify-self funktioniert in Grid.

Verwandte Konzepte