CSS/Eigenschaften/align-self

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Align-self)
Wechseln zu: Navigation, Suche

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

Siehe auch