CSS/Eigenschaften/align-self

Die Eigenschaft align-self legt eine Ausnahme der Anordnung der flexiblen Elemente fest. Dabei bekommt das flexible Element mit align-self eine andere Eigenschaft als die anderen Schwesterelemente, die durch die Eigenschaft align-items des Eltern-Containers angeordnet werden..

erlaubte Werte	auto: (Standardwert) Wert wird vom Elternelement übernommen stretch: Element wird gleichmäßig verteilt center: Element wird mittig angeordnet flex-start: Element wird oben angeordnet flex-end: Element wird unten angeordnet baseline: Element wird an der Grundlinie (baseline) ausgerichtet initial inherit Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: auto
anwendbar auf	flexible Container (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

section {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
 
#ausnahme {     
  align-self: flex-end;
}

Während alle flexiblen Elemente am Anfang der flex-direction positioniert werden, wird das Element mit der Klasse ausnahme am Ende ausgerichtet.

Weblinks

• Spezifikation (W3C): CSS Flexible Box Layout Module Level 1 - align-self
• MDN: align-self

Siehe auch

• CSS/Tutorials/Flexbox/Ausrichtung#align-self
• CSS/Tutorials/Grid/Ausrichtung von Grid-Items#align-self