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
• baseline: Alle Elemente werden an der Grundlinie des Eltern-Containers ausgerichtet

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

stretch

anwendbar auf

flexible Container

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.

Siehe auch

• CSS/Tutorials/Flexbox/Ausrichtung#align-items
• CSS/Tutorials/Grid/Ausrichtung von Grid-Items#align-items

Weblinks

• Spezifikation (W3C): CSS Flexible Box Layout Module Level 1 - align-items
• MDN: align-items
• Details: caniuse.com