Ausrichtung einzelner Elemente im Flexbox-Modell in CSS
Die folgenden Eigenschaften, die wir lernen werden,
werden nicht mehr dem Elternelement der Flex-Elemente zugewiesen,
sondern den Elementen selbst. Schauen wir uns die Eigenschaft
align-self an, die ein einzelnes
Blockelement entlang der Querachse ausrichtet.
Nehmen wir an, wir haben Flex-Blöcke, die
in einer Reihe angeordnet sind. Richten wir sie vertikal
zentriert aus, indem wir align-items auf den Wert center setzen,
und weisen dem zweiten Element eine zusätzliche Klasse
elem zu und geben ihm eine andere Ausrichtung,
zum Beispiel, setzen wir es am oberen Rand an.
Dafür setzen wir für unser Element mit der Klasse elem
die Eigenschaft align-self auf den Wert
flex-start:
<div class="parent">
<div class="child">1</div>
<div class="child elem">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
align-items: center;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
.elem {
align-self: flex-start;
}
:
