box-lines

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

Standardmäßig wird eine horizontale Box ihre Kinder in einer einzigen Reihe anordnen, und eine vertikale Box wird ihre Kinder in einer einzigen Spalte anordnen. Dieses Verhalten kann mit der Eigenschaft box-lines 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, werden als Überlauf betrachtet.

Wenn jedoch ein Wert von multiple angegeben wird, darf die Box sich auf mehrere Linien (das heißt, mehrere Reihen oder Spalten) ausdehnen, um alle ihre Kinder aufzunehmen. Die Box muss versuchen, ihre Kinder auf so wenigen Linien wie möglich unterzubringen, indem alle Elemente, falls nötig, auf ihre minimalen Breiten oder Höhen verkleinert werden.

Falls die Kinder in einer horizontalen Box immer noch nicht auf eine Linie passen, nachdem sie auf ihre minimale Breite reduziert wurden, werden die Kinder einzeln auf eine neue Linie verschoben, bis die verbleibenden Elemente auf der vorherigen Linie passen. Dieser Vorgang kann sich auf eine beliebige Anzahl von Linien wiederholen. Wenn eine Linie nur ein einzelnes Element enthält, das nicht passt, sollte das Element in dieser Linie bleiben und über die Box hinausreichen. Die späteren Linien werden in normalen Richtungskästen unter die früheren Linien gesetzt und in umgekehrten Richtungskästen darüber. Die Höhe einer Linie entspricht der Höhe des größten Kindes in dieser Linie. Es erscheint kein zusätzlicher Raum zwischen den Linien, abgesehen von den Rändern der größten Elemente in jeder Linie. Für die Berechnung der Höhe einer Linie sollten Margen mit einem berechneten Wert von Auto als Wert 0 behandelt werden.

Ein ähnlicher Prozess findet für Kinder in einer vertikalen Box statt. Spätere Linien in normalen Richtungskästen werden rechts von früheren Linien platziert und links in umgekehrten Richtungskästen.

Sobald die Anzahl der Linien festgelegt ist, dehnen sich Elemente mit einem berechneten Wert für box-flex ungleich 0 soweit nötig, um den verbleibenden Raum auf den Linien auszufüllen. Jede Linie berechnet Flexe unabhängig, sodass nur die Elemente auf dieser Linie bei der Bewertung von box-flex und box-flex-groups berücksichtigt werden. Die Anordnung der Elemente in einer Linie, wie durch die Eigenschaft box-pack angegeben, wird ebenfalls für jede Linie unabhängig 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;
}