CSS align-self-Eigenschaft
Die CSS align-self-Eigenschaft richtet die ausgewählten Elemente innerhalb der aktuellen Flex-Zeile aus und überschreibt die Werte von align-items.
Die align-self-Eigenschaft ist eine der CSS3-Eigenschaften.
Die align-self-Eigenschaft akzeptiert dieselben Werte wie die align-items-Eigenschaft:
- auto
- stretch
- flex-start
- flex-end
- center
- baseline
INFO
Diese Eigenschaft wird ignoriert, wenn der vertikale Abstand (Margin) eines Flex-Elements auf „auto“ gesetzt ist. Die align-self-Eigenschaft gilt nicht für Tabellenzellen oder blockartige Boxen.
| Anfangswert | auto |
|---|---|
| Gilt für | Flex-Elemente, Grid-Elemente und absolut positionierte Boxen. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.alignSelf = "auto"; |
Syntax
Syntax der CSS align-self-Eigenschaft
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;Beispiel zur align-self-Eigenschaft:
Beispiel zur CSS align-self-Eigenschaft mit dem Wert flex-start
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
section {
display: flex;
align-items: center;
height: 120px;
padding: 10px;
background: #99caff;
}
div {
height: 60px;
background: #1c87c9;
margin: 5px;
}
div:nth-child(1) {
align-self: flex-start;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Align-self property example</h2>
<p>Here the align-self for the first box is set to "flex-start".</p>
<section>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
</section>
</body>
</html>Ergebnis
Hier ist ein Beispiel, bei dem drei Boxen verwendet werden und die zweite mit dem Wert „flex-end“ angegeben ist.
Beispiel zur align-self-Eigenschaft mit dem Wert „flex-end“:
Beispiel zur CSS align-self-Eigenschaft mit dem Wert flex-end
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
section {
display: flex;
align-items: center;
height: 120px;
padding: 10px;
background: #99caff;
}
div {
height: 60px;
background: #1c87c9;
margin: 5px;
}
div:nth-child(2) {
align-self: flex-end;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Align-self property example</h2>
<p>Here the align-self for the second box is set to "flex-end".</p>
<section>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
</section>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| auto | Das Element erbt die align-items-Eigenschaft seines übergeordneten Containers. Dies ist der Standardwert. | Ausführen » |
| stretch | Dehnt Elemente, um sie an den Container anzupassen. | 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 » |
| baseline | Elemente werden an der Grundlinie des Containers positioniert. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Was macht die 'align-self'-Eigenschaft in CSS?