<content-distribution> CSS-Typ
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 Ausrichtungsobjekten zu verteilen.
Syntax
<content-distribution> = space-between | space-around | space-evenly | stretch
Werte
Die folgenden Schlüsselwortwerte werden durch den <content-distribution> Grammatikterm dargestellt:
space-between-
Verteilt das Ausrichtungsobjekt gleichmäßig innerhalb des Ausrichtungscontainers. Das erste Element wird bündig mit dem Start-Rand des Ausrichtungscontainers platziert, das letzte Element bündig mit dem End-Rand, und die restlichen Elemente werden gleichmäßig verteilt, sodass der Abstand zwischen zwei benachbarten Elementen gleich ist. Die standardmäßige Fallback-Ausrichtung für
space-betweenistsafe flex-startfür Flex-Layout undstartsonst. Wenn nur ein Element vorhanden ist, wird es bündig mit dem Start-Rand ausgerichtet. space-around-
Die Elemente werden gleichmäßig im Container verteilt, mit einem Halbmaß Platz an jedem Ende. Der Abstand zwischen 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 standardmäßige Fallback-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 Maß Platz an jedem Ende. Der Abstand zwischen zwei benachbarten Elementen, vor dem ersten Element und nach dem letzten Element ist jeweils gleich. Die standardmäßige Fallback-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 als die des Containers ist, werden alle Elemente, die wachsen können, ihre Größe gleich (nicht proportional) erhöhen, während dabei die durch
max-height,max-widthoder gleichwertige Funktionalität auferlegten Einschränkungen respektiert werden, sodass die kombinierte Größe der Elemente den Container genau ausfüllt. Die standardmäßige Fallback-Ausrichtung fürstretchistflex-startim Flexbox-Layout undstartin anderen Layout-Modi. Wenn nur ein Element vorhanden ist und dieses wachsen kann, wird es wachsen, um den Container zu füllen.
Spezifikationen
| Spezifikation |
|---|
| CSS Box Alignment Module Level 3 # typedef-content-distribution |
Siehe auch
- Eigenschaften, die diesen Datentyp verwenden:
align-content,justify-content,place-content - Andere Box-Ausrichtungsdatentypen:
<baseline-position>,<content-position>,<overflow-position>, und<self-position> - Modul CSS Box-Ausrichtung
- Modul CSS Flexibles Box-Layout
- Modul CSS Grid-Layout