CSS-Eigenschaft align-items

Definition und Verwendung

align-items Eigenschaft, um die Standardausrichtung der Elemente im flexiblen Container zu spezifizieren.

Tipp:Verwenden Sie für jedes Element die align-self Eigenschaften, um diese alignItems-Eigenschaft zu überschreiben.

Siehe auch:

CSS-Tutorial:CSS Grid

CSS-Tutorial:CSS Flexbox

CSS Referenzhandbuch:align-content-Eigenschaft

CSS Referenzhandbuch:align-self-Eigenschaft

CSS Referenzhandbuch:justify-content-Eigenschaft

CSS Referenzhandbuch:justify-items-Eigenschaft

CSS Referenzhandbuch:justify-self-Eigenschaft

HTML DOM Referenzhandbuch:alignItems-Eigenschaft

Beispiel

Alle Elemente im <div>-Faltwerk zentrieren:

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

Probieren Sie es selbst aus

CSS-Syntax

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

Eigenschaftswert

Wert Beschreibung
stretch Standard. Das Element wird gestreckt, um den Container zu füllen.
center Das Element befindet sich in der Mitte des Containers.
flex-start Das Element befindet sich am Anfang des Containers.
flex-end Das Element befindet sich am Ende des Containers.
baseline Das Element wird in die Baseline des Containers positioniert.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem Elternelement geerbt. Siehe: inherit.

Technische Details

Standardwert: stretch
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationseigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.alignItems="center"

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0