CSS-Eigenschaft align-content
Die CSS-Eigenschaft align-content richtet die Zeilen eines flex-Containers aus, wenn auf der Querachse verfügbarer Platz vorhanden ist.
Die Eigenschaft align-content ist eine der CSS3-Eigenschaften.
Wenn sich nur eine Zeile im Flexbox-Container befindet, hat diese Eigenschaft keine Auswirkung. Sie erfordert mehrere Zeilen innerhalb eines flexiblen Containers.
Der Wert stretch ist der Standardwert dieser Eigenschaft.
Die Eigenschaft align-content akzeptiert die folgenden Werte:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- stretch
| Anfangswert | stretch |
|---|---|
| Gilt für | Mehrzeilige Flex-Container. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.alignContent = "flex-end"; |
Syntax
Syntax der CSS-Eigenschaft align-content
css
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | initial | inherit;Beispiel für die Eigenschaft align-content mit dem Wert stretch:
html
<!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 für die Eigenschaft align-content mit dem Wert „center“:
html
<!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 für die Eigenschaft align-content mit dem Wert „flex-start“:
html
<!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 für die Eigenschaft align-content mit dem Wert „flex-end“:
html
<!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 für die Eigenschaft align-content mit dem Wert „space-between“:
html
<!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“. Der Abstand zwischen den Flex-Zeilen ist gleich groß.
Beispiel für die Eigenschaft align-content mit dem Wert „space-around“:
html
<!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>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| stretch | Dehnt die Elemente, um den Container auszufüllen. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| center | Elemente werden in der Mitte des Containers platziert. | Ausführen » |
| flex-start | Elemente werden am Anfang des Containers platziert. | Ausführen » |
| flex-end | Elemente werden am Ende des Containers platziert. | Ausführen » |
| space-between | Verteilt den Platz gleichmäßig zwischen den Flex-Zeilen. | Ausführen » |
| space-around | Elemente werden mit gleichem Abstand zueinander verteilt. | Ausführen » |
| space-evenly | Verteilt Elemente mit gleichem Abstand zueinander sowie vor dem ersten und nach dem letzten Element. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche möglichen Werte gibt es für die CSS-Eigenschaft `align-content`?