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 aufflex items, grid items, and absolutely-positioned boxes
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.
Animationstypdiskret
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 | normal | stretch | <baseline-position> | <overflow-position>? <self-position>

wobei
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

Spezifikationen

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

Browser Kompatibilität

Support im Flex-Layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Flex LayoutChrome Vollständige Unterstützung 36
Vollständige Unterstützung 36
Teilweise Unterstützung 29
Hinweise
Hinweise Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Vollständige Unterstützung 21
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 20
Hinweise
Vollständige Unterstützung 20
Hinweise
Hinweise Before Firefox 27, only single-line flexbox is supported.
Keine Unterstützung 18 — 20
Deaktiviert
Deaktiviert From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 48
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Vollständige Unterstützung 11Opera Vollständige Unterstützung 12.1Safari Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 37
Vollständige Unterstützung 37
Teilweise Unterstützung 4.4
Hinweise
Hinweise Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Vollständige Unterstützung ≤37
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 36
Vollständige Unterstützung 36
Teilweise Unterstützung 29
Hinweise
Hinweise Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Vollständige Unterstützung 25
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 20
Hinweise
Vollständige Unterstützung 20
Hinweise
Hinweise Before Firefox 27, only single-line flexbox is supported.
Keine Unterstützung 18 — 20
Deaktiviert
Deaktiviert From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 48
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 12.1Safari iOS Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 3.0
Vollständige Unterstützung 3.0
Teilweise Unterstützung 2.0
Hinweise
Hinweise Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Samsung Internet 6.0.
Vollständige Unterstützung 1.5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
baselineChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 45IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Firefox Android Vollständige Unterstützung 45Opera Android Vollständige Unterstützung 43Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
first baseline and last baselineChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 43Safari iOS Keine Unterstützung NeinSamsung Internet Android ?
left and rightChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 52Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
safe and unsafeChrome Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 63IE Keine Unterstützung NeinOpera Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Safari Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
WebView Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Chrome Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Firefox Android Vollständige Unterstützung 63Opera Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Safari iOS Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Samsung Internet Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
start and endChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 45IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Firefox Android Vollständige Unterstützung 45Opera Android Vollständige Unterstützung 43Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
stretchChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 43Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Support im Grid-Layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Grid LayoutChrome Vollständige Unterstützung 57Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 52IE Teilweise Unterstützung 10
Mit Präfix Hinweise
Teilweise Unterstützung 10
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -ms-
Hinweise IE10 and 11 have the property -ms-grid-column-align which acts in a similar way to align-self.
Opera Vollständige Unterstützung 44Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 52Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 43Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.2

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Teilweise Unterstützung  
Teilweise Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

[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