<content-distribution>
Der <content-distribution> enumerierte Werttyp wird von den Eigenschaften justify-content und align-content, sowie der 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> Grammatikterm 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 restlichen Elemente werden so gleichmäßig verteilt, dass der Abstand zwischen zwei benachbarten Elementen derselbe ist. Die standardmäßige Fallback-Ausrichtung für
space-betweenistsafe flex-startfür das Flexlayout undstartin 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, mit einem halben Abstand an beiden Enden. Der Abstand zwischen zwei benachbarten Elementen ist derselbe, und der Abstand vor dem ersten und nach dem letzten Element ist halb so groß wie der übrige Abstand. Die standardmäßige Fallback-Ausrichtung für
space-aroundistsafe center. Wenn der Container nur ein Kind hat, wird dieses zentriert. space-evenly-
Die Elemente werden gleichmäßig im Container verteilt, mit einem vollen Abstand an beiden Enden. Der Abstand zwischen zwei benachbarten Elementen, vor dem ersten und nach dem letzten Element ist derselbe. Die standardmäßige Fallback-Ausrichtung für
space-evenlyistsafe 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 die Größe jedes wachstumsfähigen Elements gleichmäßig (nicht proportional) erhöht, unter Beachtung der durch
max-height,max-widthoder gleichwertige Funktionalität auferlegten Einschränkungen, sodass die kombinierte Größe der Elemente den Container genau ausfüllt. Die standardmäßige Fallback-Ausrichtung fürstretchistflex-startim Flexbox-Layout undstartin anderen Layoutmodi. Wenn es nur ein wachstumsfähiges Element gibt, wird dieses wachsen, um den Container auszufüllen.
Spezifikationen
| Specification |
|---|
| CSS Box Alignment Module Level 3 # typedef-content-distribution |
Siehe auch
- Eigenschaften, die diesen Datentyp verwenden:
align-content,justify-content,place-content - Andere Box-Ausrichtungs-Datentypen:
<baseline-position>,<content-position>,<overflow-position>, und<self-position> - CSS-Box-Ausrichtung Modul
- CSS-Flexible-Box-Layout Modul
- CSS-Grid-Layout Modul