CSS align-items-Eigenschaft
Die CSS-Eigenschaft align-items legt die Standardausrichtung für Flex-Elemente fest. Sie ähnelt der Eigenschaft justify-content, richtet die Elemente jedoch entlang der Querachse aus (typischerweise vertikal, abhängig von flex-direction).
Hinweis: Diese Eigenschaft gilt nur für Flex- und Grid-Container.
Diese Eigenschaft gehört zu den CSS3-Eigenschaften.
Die Eigenschaft align-items akzeptiert die folgenden Werte:
- stretch
- flex-start
- center
- flex-end
- baseline
| Anfangswert | stretch |
|---|---|
| Gilt für | Flex- und Grid-Container. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.alignItems = "center"; |
Syntax
Syntax der CSS align-items-Eigenschaft
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;Beispiel zur align-items-Eigenschaft:
Beispiel zur CSS align-items-Eigenschaft mit dem Wert stretch
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: stretch;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: stretch; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Ergebnis
Im folgenden Beispiel sind die Elemente in der Mitte des Containers positioniert.
Beispiel zur align-items-Eigenschaft mit dem Wert „center“:
Beispiel zur CSS align-items-Eigenschaft mit dem Wert center
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: center;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: center; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Im nächsten Beispiel sind die Elemente am Anfang positioniert.
Beispiel zur align-items-Eigenschaft mit dem Wert „flex-start“:
Beispiel zur CSS align-items-Eigenschaft mit dem Wert flex-start
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: flex-start;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-start; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Hier wird der Wert „flex-end“ angewendet, der die Elemente am Ende des Containers platziert.
Beispiel zur align-items-Eigenschaft mit dem Wert „flex-end“:
Beispiel zur CSS align-items-Eigenschaft mit dem Wert flex-end
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: flex-end;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-end; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Sehen wir uns unser letztes Beispiel mit dem Wert „baseline“ an, der die Elemente an der Baseline des Containers ausrichtet.
Beispiel zur align-items-Eigenschaft mit dem Wert „baseline“:
Beispiel zur CSS align-items-Eigenschaft mit dem Wert baseline
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: baseline;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: baseline; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| stretch | Dehnt die Elemente, um den Container auszufüllen. Dies ist der Standardwert für diese 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 » |
| baseline | Elemente werden an der Baseline des Containers ausgerichtet. | Ausprobieren » |
| initial | Legt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Welche Werte sind für die CSS-Eigenschaft 'align-items' möglich?