Die CSS-Eigenschaft align-items definiert die Standardausrichtung für Flex-Items. Es ist genau wie die Eigenschaft justify-content, aber ihre vertikale Version.
Die Eigenschaft align-items kann folgende Werte haben:
- stretch
- flex-start
- center
- flex-end
- baseline
Anfangswert | stretch |
Gilt für | Alle Elemente |
Geerbt | Nein |
Animierbar | Nein |
Version | CSS3 |
DOM Syntax | object.style.alignItems = "center"; |
Syntax
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex; /* Safari */
-webkit-align-items: stretch; /* Safari 7.0+ */
display: flex;
align-items: stretch;
}
#example li {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: stretch; Beispiel</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Grün</li>
<li style="background-color:#1c87c9;">Blau</li>
<li style="background-color:#ccc;">Grau</li>
</ul>
</body>
</html>
Ein Beispiel mit dem Wert "center", wo die Elemente im Zentrum des Containers platziert werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
#example li {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: center; Beispiel</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Grün</li>
<li style="background-color:#1c87c9;">Blau</li>
<li style="background-color:#ccc;">Grau</li>
</ul>
</body>
</html>
Ein Beispiel mit dem Wert "flex-start", wo die Elemente am Anfang des Containers platziert werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start; /* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#example li {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-start; Beispiel</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Grün</li>
<li style="background-color:#1c87c9;">Blau</li>
<li style="background-color:#ccc;">Grau</li>
</ul>
</body>
</html>
Ein Beispiel mit dem Wert "flex-end", wo die Elemente am Ende des Containers platziert werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-end; /* Safari 7.0+ */
display: flex;
align-items: flex-end;
}
#example li {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-end; Beispiel</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Grün</li>
<li style="background-color:#1c87c9;">Blau</li>
<li style="background-color:#ccc;">Grau</li>
</ul>
</body>
</html>
Ein Beispiel mit dem Wert "baseline", wo die Elemente auf die Baseline des Containers platziert werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex; /* Safari */
-webkit-align-items: baseline; /* Safari 7.0+ */
display: flex;
align-items: baseline;
}
#example li {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>
Align-items: baselne; Beispiel
<ul id="example">
<li style="background-color:#8ebf42;">Grün</li>
<li style="background-color:#1c87c9;">Blau</li>
<li style="background-color:#ccc;">Grau</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. |
baseline | Die Elemente werden an der Basislinie des Containers platziert. |
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
Welche Werte kann die CSS-Eigenschaft 'align-items' annehmen?
Richtig!
Falsch!