CSS/Eigenschaften/column-fill

Die Eigenschaft column-fill bestimmt, wie der Inhalt eines Containerelements, für das ein column-count gesetzt wurde, auf seine Spalten verteilt wird. Diese Eigenschaft hat nur dann einen sichtbaren Effekt, wenn das Containerelement hoch genug werden kann. Ohne Angabe von height oder min-height macht der Browser das Element so niedrig, dass der Inhalt auf alle Spalten verteilt werden kann. Erst wenn Sie so viel Höhe vorgeben, dass nicht genug Inhalt da ist, um alle Spalten gleichmäßig auszufüllen, führt die Angabe von auto zu einer sichtbaren Auswirkung.

Erlaubte Werte

• auto: Die Spalten werden von links nach rechts fortlaufend gefüllt. Es ist möglich, dass Spalten leer bleiben.
• balance: Der Inhalt wird gleichmäßig auf die Spalten verteilt. Bei fragmentierten Medien (Druck) findest die Aufteilung nur auf der letzten Seite statt.
• balance-all: Ähnlich wie balance, aber bei fragmentierten Medien wird auf allen Seiten aufgeteilt. Die Spec beschreibt nicht, wie das genau passieren soll, aber es ist anzunehmen, dass der Browser versucht, alle Spalten auf allen Seiten gleich hoch zu machen.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

balance

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

article p {
   height: 10em;
   column-count: 2;
   column-fill: auto;
}

Diese CSS Regel legt fest, dass <p> Elemente, die in einem <article>-Element stehen, mindestens 10em hoch sind und der Text darin auf zwei Spalten verteilt werden soll. Dabei wird die linke Spalte zuerst gefüllt und nur dann, wenn bei einer Höhe von 10em genug Inhalt für eine zweite Spalte da ist, gelangt Text dorthin.

Beachten Sie: Die typographischen Eigenschaften orphans und widows haben Einfluss auf den Verteilalgorithmus. Wenn Sie den Browser anweisen, Schusterjungen oder Hurenkinder zu vermeiden, beachtet er das auch bei der Balancierung der Spaltenlängen, mit dem Effekt, dass kurze Inhalte trotz balance nicht alle Spalten füllen.

Siehe auch

• Typografie/Spalten
  • column-rule-fill

Weblinks

• Spezifikation (W3C): column-fill
• MDN: column-fill