CSS/Eigenschaften/align-items

Browserunterstützung
caniuse.com

Die Eigenschaft align-items legt die vertikale Ausrichtung aller Kindelemente des Rasters fest. Der Wert wird an die align-self-Eigenschaft der einzelnen Rasterelemente übergeben. Im Gegensatz zu justify-content geht es hier meist um die vertikale Anordnung, z.B. von Bildern.

Erlaubte Werte

stretch: (Standardwert) Alle Elemente werden gleichmäßig verteilt, ein möglicher Abstand zwischen den Elementen und nach dem letzten Element ist gleich
flex-start: Alle Elemente werden am Beginn der Querachse angeordnet
flex-end: Alle Elemente werden am Ende der Querachse angeordnet
center: Alle Elemente werden mittig angeordnet, ein möglicher Rand wäre bei einer horizontalen Hauptachse oben und unten
[first/last] baseline: Alle Elemente werden an der Grundlinie des Eltern-Containers ausgerichtet. Die Angabe von first oder last ist optional (first ist Default) und kann genutzt werden, um bei mehrzeiligen Elementen festzulegen, welche Baseline die Bezugslinie ist.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

stretch

anwendbar auf

formal: alle Elemente. Wirksam bei Grid und mehrzeiligen Flexboxen

Vererbung

nein

animierbar

nein

Beispiel

.mittig {
  align-items: center;
}

Durch die Klasse mittig werden die Elemente entlang der Querachse ausgerichtet

Beachten Sie: Wenn Sie den flexiblen Elementen keine feste Höhe und in der Eigenschaft align-items keinen Wert zuweisen, passt der Standardwert stretch die Höhe aller flexiblen Elemente an das größte Schwesterelement an.