Referenz:CSS/Eigenschaften/align-items

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft align-items CSS 3.0
Beschreibung 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 oben angeordnet
  • flex-end: Alle Elemente werden unten angeordnet
  • center: Alle Elemente werden mittig angeordnet, ein möglicher Rand ist oben und unten
  • baseline: Alle Elemente werden an der Grundlinie des Eltern-Containers ausgerichtet
  • initial
  • inherit
default-Wert

stretch

anwendbar auf flexible Container (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Spezifikation W3c logo klein.gif align-items property
Beispiel
.oben  {
  align-items: flex-start;
}
 
.mittig {
  align-items: center;
}
 
.unten {
  align-items: flex-end;
}
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.

Tipp

{{{Tipp}}}