<content-distribution>
Der <content-distribution> enumerierte Wertetyp wird von den Eigenschaften justify-content und align-content sowie der Kurzform place-content verwendet, um den zusätzlichen Raum eines Containers unter seinen Ausrichtungszielen zu verteilen.
Syntax
<content-distribution> = space-between | space-around | space-evenly | stretch
Werte
Die folgenden Schlüsselwortwerte werden durch das <content-distribution> Grammatikziel dargestellt:
space-between-
Verteilt die Ausrichtungsziele gleichmäßig im Ausrichtungscontainer. 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 verteilt, dass der Abstand zwischen jedem zwei benachbarten Elementen gleich ist. Die Standard-Ersatz-Ausrichtung für
space-betweenistsafe flex-startfür Flex-Layout undstartsonst. Wenn es nur ein Element gibt, wird das Element bündig mit der Startkante platziert. space-around-
Die Elemente werden gleichmäßig im Container verteilt, mit einem halb so großen Abstand an beiden Enden. Der Abstand zwischen jedem zwei benachbarten Elementen ist gleich, und der Abstand vor dem ersten und nach dem letzten Element ist halb so groß wie die anderen Abstände. Die Standard-Ersatz-Ausrichtung für
space-aroundistsafe center. Wenn der Container nur ein Kind hat, wird das Element zentriert. space-evenly-
Die Elemente werden gleichmäßig im Container verteilt, mit einem vollen Abstand an beiden Enden. Der Abstand zwischen jedem zwei benachbarten Elementen, vor dem ersten Element und nach dem letzten Element ist überall gleich. Die Standard-Ersatz-Ausrichtung für
space-evenlyistsafe 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-widthoder gleichwertige Funktionalität auferlegten Einschränkungen eingehalten werden, sodass die kombinierte Größe der Elemente genau den Container ausfüllt. Die Standard-Ersatz-Ausrichtung fürstretchistflex-startbei Flexbox undstartin anderen Layout-Modi. 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
- 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 Flexibler Box-Layout Modul
- CSS Raster-Layout Modul