CSS align-items-Eigenschaft

Beispiel

Die <div>-Elemente im Flex-Container zentrieren:

div { display: flex; align-items:center; }

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Zahlen, gefolgt von -webkit-, -ms- oder -moz-, geben die erste Version an, die mit einem Präfix funktionierte.

Eigenschaft
align-items	21.0	11.0	20.0	9.0 7.0 -webkit-	12.1

Definition und Verwendung

Die Eigenschaft align-items definiert die Standardausrichtung für Flex-Elemente entlang der Cross-Achse (vertikalen Achse) der aktuellen Zeile im Flex-Container.

Tipp:Die Eigenschaft align-items kann überschrieben werden, indem die Eigenschaft align-self für jedes Flex-Element verwendet wird.

Standardwert:	stretch
Vererbt:	nein
Animierbar:	Nein. SieheAnimierbar。
Version:	CSS3
JavaScript-Syntax:	object.style.alignItems="center" Selbst ausprobieren

CSS-Syntax

Eigenschaftswert

Wert	Beschreibung	Testen
stretch	Standardwert. Elemente werden gestreckt, um in den Container zu passen. Wenn die Eigenschaft für die Quergröße 'auto' ist, bewirkt ihr Wert, dass die Margin-Box-Größe des Elements so nah wie möglich an der Größe der Zeile liegt, während weiterhin die Beschränkungen von 'min/max-width/height' eingehalten werden.
center	Das Element wird in der Mitte des Containers positioniert. Flex-Elemente werden auf der Querachse (vertikale Achse) der Zeile zentriert. (Wenn die Zeilengröße kleiner als die Größe des Flex-Elements ist, läuft es in beide Richtungen um denselben Betrag über).
flex-start	Das Element wird am Anfang des Containers positioniert. Die Cross-Start-Außenabstandskante des Flex-Elements wird bündig mit der Cross-Start-Kante der Zeile platziert.
flex-end	Das Element wird am Ende des Containers positioniert. Die Cross-Start-Außenabstandskante des Flex-Elements wird bündig mit der Cross-End-Kante der Zeile platziert.
baseline	Das Element wird auf der Grundlinie des Containers positioniert. Wenn die Inline-Achse des Flex-Elements mit der Querachse identisch ist, entspricht dieser Wert 'flex-start'. In anderen Fällen beteiligt es sich an der Grundlinienausrichtung.
initial	Setzt diese Eigenschaft auf ihren Standardwert. Sieheinitial。
inherit	Erbt diese Eigenschaft vom übergeordneten Element. Sieheinherit。

CSS Eigenschaft