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.

Initialwertbalance
Anwendbar aufmehrspaltige Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
column-fillChrome Vollständige Unterstützung 50Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 52
Vollständige Unterstützung 52
Keine Unterstützung 13 — 74
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 37Safari 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 50Chrome Android Vollständige Unterstützung 50Firefox 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 Vollständige Unterstützung 37Safari 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
balance-all
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.