CSS/Eigenschaften/align-items

Die Eigenschaft align-items legt fest, wie die einzelnen flexiblen Elemente entlang der Querachse angeordnet werden. 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 initial inherit Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: stretch
anwendbar auf	flexible Container (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
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.

Weblinks

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

Siehe auch

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