CSS align-content Eigenschaft
Die align-content-Eigenschaft legt fest, wie der Browser Platz zwischen Zeilen verteilt. Alle sechs Werte mit Beispielen erklärt.
Die CSS-Eigenschaft align-content steuert, wie ein Flex-Container den zusätzlichen Platz zwischen und um seine Zeilen entlang der Querachse verteilt. Diese Seite erläutert, wann die Eigenschaft wirksam wird, führt durch jeden Wert mit einem ausführbaren Beispiel und zeigt den Unterschied zu verwandten Ausrichtungseigenschaften.
In einem Flex-Container mit Zeilenrichtung verläuft die Hauptachse horizontal, die Querachse ist demnach vertikal. align-content verschiebt daher ganze Zeilen von Elementen nach oben oder unten bzw. verteilt sie vertikal — einzelne Elemente werden dabei nicht berührt.
Wann wirkt align-content?
Beide folgenden Bedingungen müssen erfüllt sein, andernfalls hat die Eigenschaft keine Wirkung:
- Der Container muss Zeilenumbrüche erlauben — setze
flex-wrap: wrap(oder verwende die Kurzschreibweiseflex-flow). Der Standardwertnowraphält alles in einer Zeile. - Es muss mehr als eine Zeile vorhanden sein, sowie freier Platz auf der Querachse, in den die Zeilen verschoben werden können.
Wenn du Elemente innerhalb einer einzelnen Zeile ausrichten möchtest, verwende stattdessen align-items. align-content bezieht sich auf die Zeilen als Gruppe; align-items betrifft die Elemente innerhalb jeder Zeile. Die Eigenschaft align-content gehört zu den CSS3-Eigenschaften.
Der Wert stretch ist der Standardwert dieser Eigenschaft.
Die Eigenschaft align-content akzeptiert folgende Werte:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- stretch
| Anfangswert | stretch |
|---|---|
| Gilt für | Mehrzeilige Flex-Container. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.alignContent = "flex-end"; |
Syntax
Syntax der CSS align-content Eigenschaft
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | initial | inherit;Beispiel der align-content-Eigenschaft mit dem Wert stretch:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
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; example</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>Ergebnis
Beispiel der align-content-Eigenschaft mit dem Wert "center":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
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; example</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>Beispiel der align-content-Eigenschaft mit dem Wert "flex-start":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
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; example</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>Beispiel der align-content-Eigenschaft mit dem Wert "flex-end":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
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; example</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>Im folgenden Beispiel wird der Platz gleichmäßig zwischen den Flex-Zeilen verteilt.
Beispiel der align-content-Eigenschaft mit dem Wert "space-between":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
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; example</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>Ergebnis
Ein weiteres Beispiel mit dem Wert "space-around". Zwischen den Flex-Zeilen befindet sich gleich viel Abstand.
Beispiel der align-content-Eigenschaft mit dem Wert "space-around":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
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; example</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>Bei space-evenly sind die Abstände vor der ersten Zeile, zwischen allen Zeilen und nach der letzten Zeile identisch — im Gegensatz zu space-around, bei dem die äußeren Abstände halb so groß sind wie die inneren.
Beispiel der align-content-Eigenschaft mit dem Wert "space-evenly":
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: space-evenly;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-evenly; example</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>align-content vs. align-items vs. justify-content
Diese drei Eigenschaften werden leicht verwechselt, da alle Flex-Kindelemente ausrichten:
align-content— richtet die Zeilen als Gruppe auf der Querachse aus. Benötigt Zeilenumbrüche und mehrere Zeilen.align-items— richtet Elemente innerhalb einer einzelnen Zeile auf der Querachse aus. Funktioniert auch mit einer Zeile.justify-content— richtet Elemente entlang der Hauptachse aus (die Richtung, in der die Elemente fließen).
Einen ausführlichen Überblick, wie diese Eigenschaften zusammenwirken, findest du unter The Ultimate Guide to Flexbox.
Browser-Unterstützung
align-content wird von allen modernen Browsern unterstützt — Chrome, Firefox, Safari, Edge und Opera. Es ist Teil der stabilen Flexbox-Spezifikation, sodass für aktuelle Versionen keine Vendor-Präfixe erforderlich sind.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| stretch | Dehnt die Elemente, um den Container auszufü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 » |
| space-between | Verteilt den Platz gleichmäßig zwischen den Flex-Zeilen. | Ausprobieren » |
| space-around | Elemente werden mit gleichem Abstand zwischen ihnen verteilt. | Ausprobieren » |
| space-evenly | Verteilt Elemente mit gleichem Abstand zwischen ihnen sowie vor dem ersten und nach dem letzten Element. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |