<content-distribution>

Der <content-distribution> aufzählbare Werttyp wird von den Eigenschaften justify-content und align-content sowie der Kurzform place-content verwendet, um den zusätzlichen Platz in einem Container unter seinen Ausrichtungsobjekten zu verteilen.

Syntax

<content-distribution> = space-between | space-around | space-evenly | stretch

Werte

Die folgenden Schlüsselwortwerte werden durch den <content-distribution>-Grammatikbegriff dargestellt:

space-between

Verteilt das Ausrichtungsobjekt gleichmäßig innerhalb des Ausrichtungscontainers. Das erste Element wird bündig mit der Anfangskante des Ausrichtungscontainers platziert, das letzte Element bündig mit der Endkante, und die übrigen Elemente werden gleichmäßig verteilt, sodass der Abstand zwischen zwei benachbarten Elementen derselbe ist. Die Standardersatz-Ausrichtung für space-between ist safe flex-start im Flexlayout und start ansonsten. Wenn es nur ein Element gibt, wird dieses bündig an der Anfangskante angeordnet.

space-around

Die Elemente sind gleichmäßig im Container verteilt, mit einem halben Platz an beiden Enden. Der Abstand zwischen zwei benachbarten Elementen ist derselbe, und der Abstand vor dem ersten und nach dem letzten Element beträgt die Hälfte des anderen Abstands. Die Standardersatz-Ausrichtung für space-around ist safe center. Wenn der Container nur ein Kind hat, wird dieses zentriert.

space-evenly

Die Elemente sind gleichmäßig im Container verteilt, mit einem vollen Abstand an beiden Enden. Der Abstand zwischen zwei benachbarten Elementen sowie vor dem ersten und nach dem letzten Element ist derselbe. Die Standardersatz-Ausrichtung für space-evenly ist safe center. Wenn der Container nur ein Kind hat, wird dieses zentriert.

stretch

Wenn die kombinierte Größe der Elemente kleiner ist als die des Containers, wird jedes Element, das wachsen kann, seine Größe gleichmäßig (nicht proportional) erhöhen, wobei die durch max-height, max-width oder ähnliche Funktionalität auferlegten Beschränkungen respektiert werden, sodass die kombinierte Größe der Elemente exakt den Container ausfüllt. Die Standardersatz-Ausrichtung für stretch ist flex-start im Flexbox, und start in anderen Layout-Modi. Wenn es nur ein Element gibt und dieses wachsen kann, füllt es den Container aus.

Spezifikationen

Specification
CSS Box Alignment Module Level 3
# typedef-content-distribution

Siehe auch