CSS align-items Eigenschaft

Die CSS-Eigenschaft align-items legt die Standardausrichtung für Flex-Elemente (und Grid-Elemente) entlang der Querachse ihres Containers fest. Sie ist das Gegenstück zu justify-content, das Elemente entlang der Hauptachse ausrichtet.

Diese Seite erklärt, was die Querachse ist, geht jeden Wert mit einem ausführbaren Beispiel durch und zeigt, wie align-items mit align-self und align-content zusammenhängt.

Die Querachse verstehen

In einem Flex-Container ist die Hauptachse die Richtung, in der die Elemente fließen — festgelegt durch flex-direction. Die Querachse verläuft senkrecht dazu:

flex-direction: row (der Standard) → Hauptachse ist horizontal, also ist die Querachse vertikal, und align-items steuert die vertikale Ausrichtung.
flex-direction: column → Hauptachse ist vertikal, also ist die Querachse horizontal, und align-items steuert die horizontale Ausrichtung.

Da die Achse von flex-direction abhängt, werden Bezeichnungen wie flex-start und flex-end anstelle von top/bottom verwendet — sie bedeuten immer „Beginn der Querachse" bzw. „Ende der Querachse", unabhängig von der Richtung.

Hinweis: align-items gilt nur für Flex- und Grid-Container — bei einem Element mit dem Standard-display: block hat es keine Wirkung. Setzen Sie zuerst display: flex (oder display: grid) auf dem übergeordneten Element.

Wann es eingesetzt wird

Der klassische Anwendungsfall ist die vertikale Zentrierung: display: flex; align-items: center zentriert Kindelemente vertikal ohne Margins oder absolute Positionierung. In Kombination mit justify-content: center wird ein Element auf beiden Achsen zentriert — das altbekannte „ein Div zentrieren"-Problem, gelöst in zwei Zeilen.

align-items vs. align-self vs. align-content

align-items wird am Container gesetzt und steuert die standardmäßige Querachsen-Ausrichtung aller Elemente.
align-self wird an einem einzelnen Element gesetzt, um das align-items des Containers nur für dieses Element zu überschreiben.
align-content richtet die Zeilen als Gruppe aus, wenn der Flex-Container mehrere Zeilen hat (flex-wrap: wrap). Bei einer einzelnen Zeile hat es keine Wirkung — dann kommt align-items zum Einsatz.

Diese Eigenschaft gehört zu den CSS3-Eigenschaften.

Die Eigenschaft align-items akzeptiert folgende Werte:

stretch
flex-start
center
flex-end
baseline

Standardwert	stretch
Gilt für	Flex- und Grid-Container.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.alignItems = "center";

Syntax

align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;

Beispiele

stretch (Standard)

Mit stretch wachsen Elemente, um die gesamte Querachsen-Größe des Containers auszufüllen (hier die volle Höhe), solange sie keine eigene feste Höhe haben.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: stretch;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Probier es selbst »

center

Die Elemente werden an der Mitte der Querachse positioniert (hier vertikal zentriert).

Beispiel der CSS align-items-Eigenschaft mit dem Wert center

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: center;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Probier es selbst »

flex-start

Die Elemente werden am Beginn der Querachse platziert (oben, beim Standard-flex-direction: row).

Beispiel der CSS align-items-Eigenschaft mit dem Wert flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-start;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Probier es selbst »

flex-end

Die Elemente werden am Ende der Querachse platziert (unten, beim Standard-flex-direction: row).

Beispiel der CSS align-items-Eigenschaft mit dem Wert flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-end;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Probier es selbst »

baseline

Die Elemente werden so ausgerichtet, dass ihre Text-Baselines auf einer Linie liegen. Dies ist nützlich, wenn Elemente Text mit unterschiedlichen Schriftgrößen enthalten und die Buchstaben auf einer gemeinsamen Linie stehen sollen.

Beispiel der CSS align-items-Eigenschaft mit dem Wert baseline

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: baseline;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: baseline; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Probier es selbst »

Werte

Wert	Beschreibung	Ausprobieren
stretch	Lässt Elemente so ausdehnen, dass sie den Container füllen. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
center	Elemente werden in der Mitte des Containers platziert.	Ausprobieren »
flex-start	Elemente werden am Anfang des Containers platziert.	Ausprobieren »
flex-end	Elemente werden am Ende des Containers platziert.	Ausprobieren »
baseline	Elemente werden an der Baseline des Containers positioniert.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Häufige Fallstricke

stretch hat keine Wirkung, wenn Elemente eine feste Querachsen-Größe haben. Wenn ein Element bereits eine height besitzt (in einem Row-Container), kann stretch es nicht vergrößern. Entfernen Sie die feste Größe, damit es sich ausdehnen kann.
Ohne Flex/Grid-Container passiert nichts. align-items wird ignoriert, solange das übergeordnete Element nicht display: flex oder display: grid hat.
Die Achse kehrt sich mit flex-direction: column um. Dann steuert align-items die horizontale Ausrichtung, nicht die vertikale.
Um nur ein einzelnes Element auszurichten, verwenden Sie align-self an diesem Element, anstatt den gesamten Container zu ändern.

Übungen

Übung

Welche möglichen Werte hat die Eigenschaft 'align-items' in CSS?

Die Querachse verstehen

Wann es eingesetzt wird

align-items vs. align-self vs. align-content

Syntax

Beispiele

stretch (Standard)

center

flex-start

flex-end

baseline

Werte

Häufige Fallstricke

Verwandte Eigenschaften

Übungen