CSS/Eigenschaften/align-content

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

Die Eigenschaft align-content legt fest, wie die einzelnen flexiblen Elemente entlang der Querachse angeordnet werden.

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 linksbündig angeordnet
  • flex-end: Alle Elemente werden rechtsbündig angeordnet
  • center: Alle Elemente werden mittig angeordnet, ein möglicher Rand ist links und rechts
  • space-between: Alle Elemente werden verteilt, zwischen ihnen ist ein (möglicher) Rand, das erste und letzte Element stoßen an die rechte und linke Seite des Elternelements
  • space-around: Alle Elemente werden verteilt, der mögliche Rand ist sowohl zwischen den Elementen als auch zum Eltern-Container
  • 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
.vorne  {
  align-content: flex-start;
}
.mittig {
  align-content: center;
}
  • flex-start: Alle Elemente werden oben angeordnet
  • mittig: alle Elemente werden mit align-content: center; mittig angeordnet, ein möglicher Abstand ist oben und unten
Beachten Sie: Wenn Sie flex-flow: row wrap; verwenden wollen, müssen Sie die (browsereigene) margin der flexiblen Elemente auf 0 stellen, da sonst die flexiblen Elemente aus dem Eltern-Container hinausragen

Weblinks

Siehe auch