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
Medienvisual, aber in kontinuierlichen Medien hat sie keinen Effekt in überlaufenden Spalten
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgenach 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
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
Vollständige Unterstützung 13
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 ? 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.