CSS-Eigenschaft align-items

Die CSS-Eigenschaft align-items definiert die Standardausrichtung für Flex-Items. Es ist genau wie die Eigenschaft justify-content, aber ihre vertikale Version.

Die Eigenschaft align-items kann folgende Werte haben:

  • stretch
  • flex-start
  • center
  • flex-end
  • baseline
Anfangswert stretch
Gilt für Alle Elemente
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.alignItems = "center";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: stretch; /* Safari 7.0+ */
      display: flex;
      align-items: stretch;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: stretch; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Grün</li>
      <li style="background-color:#1c87c9;">Blau</li>
      <li style="background-color:#ccc;">Grau</li>
    </ul>
  </body>
</html>

Ein Beispiel mit dem Wert "center", wo die Elemente im Zentrum des Containers platziert werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: center; /* Safari 7.0+ */
      display: flex;
      align-items: center;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: center; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Grün</li>
      <li style="background-color:#1c87c9;">Blau</li>
      <li style="background-color:#ccc;">Grau</li>
    </ul>
  </body>
</html>

Ein Beispiel mit dem Wert "flex-start", wo die Elemente am Anfang des Containers platziert werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: flex-start; /* Safari 7.0+ */
      display: flex;
      align-items: flex-start;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-start; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Grün</li>
      <li style="background-color:#1c87c9;">Blau</li>
      <li style="background-color:#ccc;">Grau</li>
    </ul>
  </body>
</html>

Ein Beispiel mit dem Wert "flex-end", wo die Elemente am Ende des Containers platziert werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: flex-end; /* Safari 7.0+ */
      display: flex;
      align-items: flex-end;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-end; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Grün</li>
      <li style="background-color:#1c87c9;">Blau</li>
      <li style="background-color:#ccc;">Grau</li>
    </ul>
  </body>
</html>

Ein Beispiel mit dem Wert "baseline", wo die Elemente auf die Baseline des Containers platziert werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: baseline; /* Safari 7.0+ */
      display: flex;
      align-items: baseline;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>
    Align-items: baselne; Beispiel
    <ul id="example">
      <li style="background-color:#8ebf42;">Grün</li>
      <li style="background-color:#1c87c9;">Blau</li>
      <li style="background-color:#ccc;">Grau</li>
    </ul>
  </body>
</html>

Werte

Wert Beschreibung
stretch Es lässt die Einträge dehnen, damit sie in den Container passen. Das ist der Standardwert für diese Eigenschaft.
center Die Einträge werden in der Mitte des Containers platziert.
flex-start Die Einträge werden am Anfang des Containers platziert.
flex-end Die Einträge werden am Ende des Containers platziert.
baseline Die Elemente werden an der Basislinie des Containers platziert.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+

Übe dein Wissen

Welche Werte kann die CSS-Eigenschaft 'align-items' annehmen?
Finden Sie das nützlich?