column-fill

Übersicht

Die CSS Eigenschaft column-fill bestimmt die Aufteilung von Inhalten auf Spalten. Inhalte können entweder gleichmäßig verteilt werden, damit alle Spalten dieselbe Höhe haben, oder sie nehmen den Raum ein, den der Inhalt benötigt, sofern auto verwendet wird.

Initialwert	`balance`
Anwendbar auf	mehrspaltige Elemente
Vererbt	Nein
Medien	`visual`, aber in kontinuierlichen Medien hat sie keinen Effekt in überlaufenden Spalten
Berechneter Wert	wie angegeben
Animationstyp	diskret
Kanonische Reihenfolge	nach Grammatik

Syntax

/* Schlüsselwortwerte */
column-fill: auto;
column-fill: balance;

/* Globale Werte */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

Werte

auto: Die Spalten werden fortlaufend gefüllt.
balance: Der Inhalt wird gleichmäßig aufgeteilt.

auto | balance | balance-all

Beispiel

.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
  height: 200px;
}

Spezifikationen

Spezifikation	Status	Kommentar
CSS Multi-column Layout Module Die Definition von 'column-fill' in dieser Spezifikation.	Arbeitsentwurf	Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`column-fill`	Chrome Vollständige Unterstützung 50	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 52 Vollständige Unterstützung 52 Vollständige Unterstützung 13 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	IE Vollständige Unterstützung 10	Opera Vollständige Unterstützung 37	Safari Vollständige Unterstützung 9 Vollständige Unterstützung 9 Vollständige Unterstützung 8 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	WebView Android Vollständige Unterstützung 50	Chrome Android Vollständige Unterstützung 50	Firefox Android Vollständige Unterstützung 52 Vollständige Unterstützung 52 Vollständige Unterstützung 14 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	Opera Android ?	Safari iOS Vollständige Unterstützung 9 Vollständige Unterstützung 9 Vollständige Unterstützung 8 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Vollständige Unterstützung 5.0

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Kompatibilität unbekannt: Kompatibilität unbekannt
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.: Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.