CSS/Eigenschaften/align-content

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

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

Siehe auch

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