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.

Initialwertauto
Anwendbar aufflexible Elemente einschließlich In-Flow-Pseudo-Elemente
VererbtNein
Medienvisuell
Berechneter Wertauto 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.
AnimierbarNein
Kanonische Reihenfolgedie 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

Browser Kompatibilität

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

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, fscholz
 Zuletzt aktualisiert von: Sebastianz,