box-lines

Die box-lines CSS Eigenschaft bestimmt, ob die Box eine einzelne oder mehrere Linien haben darf (Reihen für horizontal ausgerichtete Boxen, Spalten für vertikal ausgerichtete Boxen).

Standardmäßig legt eine horizontale Box ihre Kinder in einer einzigen Reihe an, und eine vertikale Box legt ihre Kinder in einer einzigen Spalte an. Dieses Verhalten kann mit der box-lines Eigenschaft geändert werden. Der Standardwert ist single, was bedeutet, dass alle Elemente in einer einzigen Reihe oder Spalte platziert werden und alle Elemente, die nicht passen, als Überlauf betrachtet werden.

Wird jedoch ein Wert von multiple angegeben, darf die Box auf mehrere Linien (d.h. mehrere Reihen oder Spalten) erweitert werden, um alle ihre Kinder aufzunehmen. Die Box muss versuchen, ihre Kinder auf so wenige Linien wie möglich unterzubringen, indem sie alle Elemente bei Bedarf auf ihre minimalen Breiten oder Höhen reduziert.

Wenn die Kinder in einer horizontalen Box nach der Reduzierung auf ihre minimalen Breiten immer noch nicht auf eine Linie passen, werden die Kinder einzeln auf eine neue Linie verschoben, bis die verbleibenden Elemente auf die vorherige Linie passen. Dieser Vorgang kann sich auf eine beliebige Anzahl von Linien wiederholen. Wenn eine Linie nur ein Element enthält, das nicht passt, sollte das Element auf dieser Linie bleiben und über die Box hinausragen. Die späteren Linien werden in Normalrichtungsboxen unterhalb der früheren Linien und in umgekehrter Richtung darüber platziert. Die Höhe einer Linie entspricht der Höhe des größten Kindes in dieser Linie. Zwischen den Linien erscheint kein zusätzlicher Platz abgesehen von den Rändern der größten Elemente in jeder Linie. Zur Berechnung der Höhe einer Linie sollten Ränder mit einem berechneten Wert von auto als Wert von 0 behandelt werden.

Ein ähnlicher Prozess erfolgt für Kinder in einer vertikalen Box. Spätere Linien in Normalrichtungsboxen werden rechts von früheren Linien und in umgekehrter Richtung links platziert.

Sobald die Anzahl der Linien bestimmt wurde, dehnen sich Elemente mit einem berechneten Wert für box-flex ungleich 0 nach Bedarf aus, um den verbleibenden Platz auf den Linien zu füllen. Jede Linie berechnet Flexes unabhängig, sodass nur Elemente auf dieser Linie berücksichtigt werden, wenn box-flex und box-flex-groups ausgewertet werden. Die Packung der Elemente in einer Linie, wie sie durch die box-pack Eigenschaft spezifiziert wird, wird auch unabhängig für jede Linie berechnet.

/* Keyword values */
box-lines: single;
box-lines: multiple;

/* Global values */
box-lines: inherit;
box-lines: initial;
box-lines: unset;

box-lines = 
  single    |
  multiple  

div {
  display: box;
  box-orient: horizontal;
  box-lines: multiple;
}