CSS-Eigenschaft align-content

Die CSS-Eigenschaft align-content wird verwendet, um die Linien eines Flex-Containers auszurichten, wenn vertikal (auf der Querachse) ein Raum vorhanden ist.

Wenn es nur eine Linie in der Flexbox gibt, hat diese Eigenschaft keine Auswirkung. Es benötigt mehrere Zeilen innerhalb eines flexiblen Containers.

Der Wert "stretch" ist der Standardwert dieser Eigenschaft.

Die Eigenschaft align-content kann folgende Werte haben:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch
Anfangswert stretch
Gilt für Mehrzeilige Flex-Container
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.alignContent = "flex-end",

Syntax

align-content: flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: stretch; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: stretch;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: stretch; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Versuchen wir ein weiteres Beispiel, wo der Wert "center" angewendet wird.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: center; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: center;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: center; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Ein Beispiel mit dem Wert "flex-start", wo die Elemente am Anfang stehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: flex-start; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-start; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Ein Beispiel mit dem Wert "flex-end", wo die Elemente am Ende stehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: flex-end; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: flex-end;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-end; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Ein weiteres Beispiel, wo der Wert "space-between" verwendet wird. Die Einträge werden zwischen den Linien platziert.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: space-between; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: space-between;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-between; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Ein weiteres Beispiel mit dem Wert "space-around". Zwischen den Elementen gibt es den gleichen Abstand.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
      width: 70px;
      height: 300px;
      padding: 0;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-flex-flow: row wrap; /* Safari 6.1+ */
      -webkit-align-content: space-around; /* Safari 7.0+ */
      display: flex;
      flex-flow: row wrap;
      align-content: space-around;
      }
      #example li {
      width: 70px;
      height: 70px;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-around; Beispiel</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></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.
space-between Die Einträge werden zwischen den Linien platziert.
space-around Die Einträge werden mit gleichem Abstand zwischen ihnen verteilt.
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

Was bedeutet die CSS-Eigenschaft 'align-content'?
Finden Sie das nützlich?