align-self

Übersicht

Die align-self CSS Eigenschaft richtet Flexelemente der aktuellen Flexzeile aus und überschreibt dabei den Wert von align-items. Falls der Querachsenabstand irgendeines Flexelements auf auto gesetzt ist, wird align-self ignoriert.

Initialwert	`auto`
Anwendbar auf	flexible Elemente einschließlich In-Flow-Pseudo-Elemente
Vererbt	Nein
Medien	visuell
Berechneter Wert	`auto` berechnet sich zu sich selbst bei absolut positionierten Elementen und zum berechneten Wert von `align-items` des Elternelements (abzüglich veralteter Schlüsselwörter) bei allen anderen Boxen oder `start`, falls die Box kein Elternelement hat. Sein Verhalten hängt vom Layoutmodell ab, wie für `justify-self` beschrieben. Ansonsten der angegebene Wert.
Animierbar	Nein
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

Syntax

/* Schlüsselwort Werte */
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
align-self: stretch

/* Globale Werte */
align-self: inherit;
align-self: initial;
align-self: unset;

Werte

auto: Verwendet den align-items Wert des Elternelements oder stretch, falls das Element kein Elternelement besitzt.
flex-start: Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.
flex-end: Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.
center: Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.
baseline: Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.
stretch: Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile ist übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.

Formale Syntax

auto | flex-start | flex-end | center | baseline | stretch

Spezifikationen

Spezifikation	Status	Kommentar
CSS Box Alignment Module Die Definition von 'align-self' in dieser Spezifikation.	Arbeitsentwurf	Ursprüngliche Definition

Merkmal	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Grundlegende Unterstützung	21.0-webkit 36.0	18.0 (18.0) (behind a pref) [1] 20.0 (20.0)	Nicht unterstützt	12.10	Nicht unterstützt

Merkmal	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	?	?	?	Nicht unterstützt	12.10	Nicht unterstützt

[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

Siehe auch

Verwendung von CSS Flexible Boxes