<content-distribution>

Der <content-distribution> aufgezählte Wertetyp wird von den Eigenschaften justify-content und align-content, sowie dem Kurzschreibweise place-content verwendet, um den zusätzlichen Raum eines Containers 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> Grammatikausdruck repräsentiert:

space-between

Verteilt das Ausrichtungsobjekt gleichmäßig innerhalb des Ausrichtungscontainers. Das erste Element wird bündig mit der Startkante des Ausrichtungscontainers platziert, das letzte Element bündig mit der Endkante, und die verbleibenden Elemente werden so gleichmäßig verteilt, dass der Abstand zwischen zwei benachbarten Elementen gleich ist. Die standardmäßige Fallback-Ausrichtung für space-between ist safe flex-start für das Flexlayout und start in anderen Fällen. Wenn es nur ein Element gibt, wird dieses bündig mit der Startkante sein.

space-around

Die Elemente werden gleichmäßig im Container verteilt, wobei an beiden Enden ein halb so großer Abstand vorhanden ist. Der Abstand zwischen zwei benachbarten Elementen ist der gleiche, und der Abstand vor dem ersten und nach dem letzten Element ist halb so groß wie der andere Abstand. Die standardmäßige Fallback-Ausrichtung für space-around ist safe center. Wenn der Container nur ein Kind hat, wird das Element zentriert.

space-evenly

Die Elemente werden gleichmäßig im Container verteilt, mit einem gleich großen Abstand an beiden Enden. Der Abstand zwischen zwei benachbarten Elementen, vor dem ersten Element und nach dem letzten Element, ist überall gleich. Die standardmäßige Fallback-Ausrichtung für space-evenly ist safe center. Wenn der Container nur ein Kind hat, wird das Element zentriert.

stretch

Wenn die kombinierte Größe der Elemente kleiner ist als die Größe des Containers, wird die Größe aller wachsenden Elemente gleichmäßig (nicht proportional) erhöht, während die durch max-height, max-width oder gleichwertige Funktionen auferlegten Einschränkungen beachtet werden, sodass die kombinierte Größe der Elemente genau den Container füllt. Die standardmäßige Fallback-Ausrichtung für stretch ist flex-start im Flexbox, und start in anderen Layoutmodi. Wenn es nur ein Element gibt und dieses wachsen kann, wird es wachsen, um den Container zu füllen.

Spezifikationen

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

Siehe auch