box-lines

Die box-lines CSS Eigenschaft bestimmt, ob die Box eine einzelne oder mehrere Zeilen (bei horizontal ausgerichteten Boxen) oder Spalten (bei vertikal ausgerichteten Boxen) haben kann.

Standardmäßig legt eine horizontale Box ihre Kinder in einer einzigen Zeile und eine vertikale Box 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 Zeile oder Spalte platziert werden und alle Elemente, die nicht passen, als Überlauf betrachtet werden.

Wird jedoch ein Wert von multiple angegeben, darf die Box sich auf mehrere Zeilen (das heißt, mehrere Reihen oder Spalten) erweitern, um alle Kinder unterzubringen. Die Box muss versuchen, ihre Kinder auf so wenigen Zeilen wie möglich unterzubringen, indem alle Elemente gegebenenfalls auf ihre minimalen Breiten oder Höhen verkleinert werden.

Wenn die Kinder in einer horizontalen Box nach Verkleinerung auf ihre Mindestbreiten immer noch nicht in eine Zeile passen, werden die Kinder nacheinander in eine neue Zeile verschoben, bis die verbleibenden Elemente in die vorherige Zeile passen. Dieser Vorgang kann sich auf eine beliebige Anzahl von Zeilen wiederholen. Wenn eine Zeile nur ein einzelnes Element enthält, das nicht passt, sollte das Element in dieser Zeile bleiben und aus der Box herausfließen. Die späteren Zeilen werden in normalen Richtungsboxen unter den früheren Zeilen platziert und in umgekehrten Richtungsboxen darüber. Die Höhe einer Zeile ist die Höhe des größten Kindes in dieser Zeile. Es erscheint kein zusätzlicher Raum zwischen den Zeilen, abgesehen von den Rändern der größten Elemente in jeder Zeile. Bei der Berechnung der Höhe einer Zeile sollten Ränder mit einem berechneten Wert von auto als 0 behandelt werden.

Ein ähnlicher Vorgang tritt bei Kindern in einer vertikalen Box auf. Spätere Zeilen in normalen Richtungsboxen werden rechts von früheren Zeilen platziert und in umgekehrten Richtungsboxen links davon.

Sobald die Anzahl der Zeilen bestimmt ist, dehnen sich Elemente mit einem berechneten Wert für box-flex ungleich 0 nach Bedarf aus, um den verbleibenden Raum in den Zeilen zu füllen. Jede Zeile berechnet Flex unabhängig, sodass nur die Elemente auf dieser Zeile bei der Auswertung von box-flex und box-flex-groups berücksichtigt werden. Das Packen von Elementen in einer Zeile, wie durch die box-pack Eigenschaft spezifiziert, wird ebenfalls unabhängig für jede Zeile 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;
}