align-items

Springen zu:
  1. Übersicht
  2. Syntax
  3. Beispiele
  4. Spezifikationen
  5. Browser Kompatibilität
  6. Siehe auch

Übersicht

Die align-items CSS Eigenschaft richtet Flexelemente der aktuellen Flexlinie genauso wie justify-content aus, jedoch in senkrechter Richtung.

Initialwertnormal
Anwendbar aufalle Elemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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

Syntax

/* Am Kreuzungsstart ausrichten */
align-items: flex-start;

/* Am Kreuzungsende ausrichten */
align-items: flex-end;

/* Elemente um die Kreuzungsachse zentrieren */
align-items: center;

/* Basislinien der Elemente ausrichten */
align-items: baseline;

/* Elemente dehnen, um sie einzupassen */
align-items: stretch;

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

Werte

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 übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.

Formale Syntax

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

Beispiele

FIXME:

Spezifikationen

Spezifikation Status Kommentar
CSS Flexible Box Layout Module
Die Definition von 'align-items' in dieser Spezifikation.		 Anwärter Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Support im Flex-Layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 52
Vollständige Unterstützung 52
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 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 20
Hinweise
Vollständige Unterstützung 20
Hinweise
Hinweise Multi-line flexbox has been supported since Firefox 28.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 18 — ?
Deaktiviert
Deaktiviert From version 18: 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 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 11
Hinweise
Vollständige Unterstützung 11
Hinweise
Hinweise In Internet Explorer 10 and 11, if column flex items have align-items: center; set on them and their content is too large, then they will overflow the bounds of their container. See Flexbug #2.
Opera Vollständige Unterstützung 12.1Safari Vollständige Unterstützung 7
Mit Präfix
Vollständige Unterstützung 7
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 52
Vollständige Unterstützung 52
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 Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 52
Vollständige Unterstützung 52
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-
Edge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
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 Multi-line flexbox has been supported since Firefox 28.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 18 — ?
Deaktiviert
Deaktiviert From version 18: 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 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 7
Mit Präfix
Vollständige Unterstützung 7
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?
first baseline and last baselineChrome ? Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 45IE Keine Unterstützung NeinOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 45Opera Android ? Safari iOS ? Samsung Internet Android ?
start and endChrome ? Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 45IE Keine Unterstützung NeinOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 45Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome ? Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 45IE Keine Unterstützung NeinOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 45Opera Android ? Safari iOS ? Samsung Internet Android ?
safe and unsafeChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 63IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari ? WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 63Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein

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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 57Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 52IE ? Opera Vollständige Unterstützung 44Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 52Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 44Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.2
start and endChrome Vollständige Unterstützung JaEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung JaIE Keine Unterstützung NeinOpera ? Safari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung JaOpera Android ? Safari iOS Vollständige Unterstützung JaSamsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

[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.

[2] In Internet Explorer 10-11 (aber nicht 12+), falls Spaltenflexelemente align-items: center; gesetzt haben und ihr Inhalt zu groß ist, überfließen sie die Grenzen ihres Containers. Siehe Flexbug #2 für mehr Informationen.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, d4rkne55, fscholz, Sebastianz
Zuletzt aktualisiert von: SJW,