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	Edge Mobile	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Grundlegende Unterstützung	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 — ? 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.1	Safari 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.1	Safari 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 baseline`	Chrome ?	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 45	IE Keine Unterstützung Nein	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 45	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`start` and `end`	Chrome ?	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 45	IE Keine Unterstützung Nein	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 45	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`left` and `right`	Chrome ?	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 45	IE Keine Unterstützung Nein	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 45	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`safe` and `unsafe`	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 63	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 63	Opera 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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Edge Mobile	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Grundlegende Unterstützung	Chrome Vollständige Unterstützung 57	Edge Vollständige Unterstützung 16	Firefox Vollständige Unterstützung 52	IE ?	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	Edge Mobile Vollständige Unterstützung Ja	Firefox Android Vollständige Unterstützung 52	Opera Android Vollständige Unterstützung 44	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 Ja	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung Ja	IE Keine Unterstützung Nein	Opera ?	Safari Vollständige Unterstützung Ja	WebView Android Vollständige Unterstützung Ja	Chrome Android Vollständige Unterstützung Ja	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung Ja	Opera Android ?	Safari iOS Vollständige Unterstützung Ja	Samsung 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

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

Schlagwörter des Dokuments und Mitwirkende

Lernen Sie das Beste aus dem Bereich Web-Entwicklung

Vielen Dank! Sehen Sie bitte in Ihrem Posteingang nach, um das Abonnement zu bestätigen.