CSS/Eigenschaften/align-items

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Align-items)
Wechseln zu: Navigation, Suche

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

Siehe auch