align-items

Übersicht

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

Initialwert	`normal`
Anwendbar auf	alle Elemente
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie angegeben
Animationstyp	diskret
Kanonische Reihenfolge	die 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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Supported in Flex Layout	Chrome 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 — 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 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.1	Safari Vollständige Unterstützung 9 Vollständige Unterstützung 9 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 ≤37 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-	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 — 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 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.1	Safari iOS Vollständige Unterstützung 9 Vollständige Unterstützung 9 Vollständige Unterstützung 7 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Vollständige Unterstützung 6.0 Vollständige Unterstützung 6.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-
`first baseline` and `last baseline`	Chrome Vollständige Unterstützung 59	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 45	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 46	Safari Vollständige Unterstützung 11	WebView Android Vollständige Unterstützung 59	Chrome Android Vollständige Unterstützung 59	Firefox Android Vollständige Unterstützung 45	Opera Android Vollständige Unterstützung 43	Safari iOS Vollständige Unterstützung 11	Samsung Internet Android Vollständige Unterstützung Ja
`left` and `right`	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 45	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Vollständige Unterstützung 9	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 45	Opera Android Keine Unterstützung Nein	Safari iOS Vollständige Unterstützung 9	Samsung Internet Android Keine Unterstützung Nein
`safe` and `unsafe`	Chrome Keine Unterstützung Nein Hinweise Keine Unterstützung Nein Hinweise Hinweise This value is recognized, but has no effect.	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 63	IE Keine Unterstützung Nein	Opera 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 63	Opera 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 `end`	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 45	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 44	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 45	Opera Android Vollständige Unterstützung 43	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Supported in Grid Layout	Chrome Vollständige Unterstützung 57	Edge Vollständige Unterstützung 16	Firefox Vollständige Unterstützung 52	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 44	Safari Vollständige Unterstützung 10.1	WebView Android Vollständige Unterstützung 57	Chrome Android Vollständige Unterstützung 52	Firefox Android Vollständige Unterstützung 52	Opera Android Vollständige Unterstützung 43	Safari iOS Vollständige Unterstützung 10.3	Samsung Internet Android Vollständige Unterstützung 6.2
`start` and `end`	Chrome Vollständige Unterstützung 57	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 52	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 44	Safari Vollständige Unterstützung 11	WebView Android Vollständige Unterstützung 57	Chrome Android Vollständige Unterstützung 57	Firefox Android Vollständige Unterstützung 52	Opera Android Vollständige Unterstützung 43	Safari iOS Vollständige Unterstützung 11	Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung

[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

Verwendung von CSS Flexible Boxes

align-items

Übersicht

Syntax

Werte

Formale Syntax

Beispiele

Spezifikationen

Browser Kompatibilität

Support im Flex-Layout

Legende

Support im Grid-Layout

Legende

Siehe auch

Lernen Sie das Beste aus dem Bereich Web-Entwicklung