We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

column-fill

Springen zu:
  1. Übersicht
  2. Syntax
  3. Beispiel
  4. Spezifikationen
  5. Browser Kompatibilität

Ü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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ? 13.0 (13.0)-moz ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 13.0 (13.0)-moz ? ? ?

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: Sebastianz, fscholz, SJW
Zuletzt aktualisiert von: Sebastianz,