CSS/Eigenschaften/align-self

Browserunterstützung
caniuse.com

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

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

auto

anwendbar auf

flexible Container

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.

Siehe auch

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

Weblinks

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