<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