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
|
|
|
|
|---|---|---|---|
|
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'?
Richtig!
Falsch!