Spanning und Ausbalancieren von Spalten

Um ein Element über Spalten zu spannen, verwenden Sie die column-span Eigenschaft mit dem Wert all. Dies führt dazu, dass das Element zu einem Spanner wird, der alle Spalten umfasst.

Jedes nachgeordnete Element des Multicol-Containers kann in einen Spanner verwandelt werden, einschließlich direkter und indirekter Kinder. Zum Beispiel könnte eine direkt im Container verschachtelte Überschrift ein Spanner werden, ebenso wie eine in einem <section> verschachtelte Überschrift innerhalb des Multicol-Containers.

Im untenstehenden Beispiel ist das <h2> Element auf column-span: all gesetzt und spannt alle Spalten.

In diesem zweiten Beispiel befindet sich die Überschrift innerhalb eines <article> Elements und spannt dennoch wie erwartet den Inhalt.

Wenn ein Spanner eingeführt wird, unterbricht er den Fluss der Spalten; die Spalten beginnen nach dem Spanner neu, wodurch effektiv ein neues Set von Spaltenboxen entsteht. Der Inhalt springt nicht über ein spannendes Element.

Der column-span kann nur zwei Werte haben. Der Anfangswert none bedeutet, dass das Element nicht spannt und innerhalb einer Spalte bleibt. Der Wert all bedeutet, dass das Element alle Spalten spannt. Es gibt keine Werte, die eine partielle Spannweite ermöglichen, wie das Spannen eines Elements über zwei von drei Spalten.

Wenn das spannbare Element sich innerhalb eines anderen Elements mit Rändern, Polsterungen, einem Rand oder einer Hintergrundfarbe befindet, könnte die Box über dem Spanner erscheinen, wobei der restliche Inhalt darunter angezeigt wird. Aus diesem Grund sollte darauf geachtet werden, ein Element so einzustellen, dass es alle Spalten spannt, um sicherzustellen, dass dieses Szenario berücksichtigt wird.

Zusätzlich, wenn ein spannendes Element später im Inhalt erscheint, kann es zu unerwartetem oder unerwünschtem Verhalten führen, wenn nicht genug Inhalt vorhanden ist, um Spalten nach dem Spanner zu erstellen. Verwenden Sie das Spannen vorsichtig und testen Sie an verschiedenen Breakpoints, um sicherzustellen, dass Sie den gewünschten Effekt erzielen.

Ein ausgeglichenes Set von Spalten ist dort, wo alle Spalten ungefähr die gleiche Menge an Inhalt haben. Befüllen und Ausbalancieren sind relevant, wenn die Menge an Inhalt nicht mit dem bereitgestellten Raum übereinstimmt, wie zum Beispiel, wenn eine height auf dem Container deklariert ist.

Der Anfangswert für column-fill ist balance. Der Wert balance bedeutet, dass alle Spalten so weit wie möglich ausgeglichen sind. In fragmentierten Kontexten, wie zum Beispiel Seitenmedien, wird nur das letzte Fragment ausgeglichen. Das bedeutet, dass auf der letzten Seite das letzte Set an Spaltenboxen ausgeglichen ist.

Der andere Ausgleichswert, balance-all, balanciert alle Spalten in fragmentierten Kontexten aus.

Die Spalten in diesem Beispiel enthalten ein Bild und etwas Text, die ausgeglichen sind. Das Bild, das nicht gebrochen werden kann, befindet sich in der ersten Spalte. Die anderen Spalten sind ausgeglichen und füllen sich mit gleichen Mengen an Text.

Der auto Wert für column-fill füllt eine Spalte sequenziell, wobei zuerst die erste Spalte in der Inline-Start-Richtung gefüllt wird, bevor Inhalte in nachfolgenden Spalten platziert werden, anstatt alle Spalten gleichmäßig zu balancieren und zu füllen. In diesem Beispiel haben wir column-fill auf auto geändert. Die Spalten werden bis zur Höhe des Containers gefüllt und lassen am Ende leere Spalten.

Im nächsten Leitfaden lernen Sie wie Multicol das Überlaufen innerhalb der Spalten behandelt und wenn es mehr Spalten gibt, als in den Container passen.