Referenz:CSS/Eigenschaften/align-content

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft align-content CSS 3.0
Beschreibung 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
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-content property
Beispiel
.vorne  {
  align-content: flex-start;
}
 
.mittig {
  align-content: center;
}
 
.stretch {
  align-content: stretch;
}

Im Beispiel hat die erste Reihe den Standardwert nowrap, da flex-wrap nicht festgelegt wurde. Deshalb werden die festgelegten Breiten ignoriert und passen sich die flexiblen Elemente an die Breite des Eltern-Container an. Die zweite Reihe mit der Eigenschaft flex-wrap: wrap; stellt die Elemente mit ihren festgelegten Breiten dar, so dass es zu einem Zeilenumbruch kommt. Mit der Eigenschaft flex-wrap: wrap-reverse; kann die Anordnung der Zeilen (nicht der flexiblen Elemente) vertauscht werden.

Beachten Sie

Wenn Sie das im Beispiel verwendete 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

Tipp

{{{Tipp}}}