box-lines
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.
Warnung: Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Layout Modul Entwurfs. Sie wurde in der Spezifikation ersetzt. Siehe flexbox für Informationen über den aktuellen Standard.
Die box-lines CSS Eigenschaft bestimmt, ob die Box eine einzelne oder mehrere Linien (Zeilen für horizontal orientierte Boxen, Spalten für vertikal orientierte Boxen) haben darf.
Standardmäßig ordnet eine horizontale Box ihre Kinder in einer einzigen Reihe an, und eine vertikale Box ordnet ihre Kinder in einer einzigen Spalte an. Dieses Verhalten kann mit der box-lines Eigenschaft verä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, ist es der Box erlaubt, sich auf mehrere Linien (das heißt, mehrere Zeilen oder Spalten) auszudehnen, um alle ihre Kinder aufzunehmen. Die Box muss versuchen, ihre Kinder auf so wenigen Linien wie möglich unterzubringen, indem sie, falls nötig, alle Elemente auf ihre minimalen Breiten oder Höhen verkleinert.
Wenn die Kinder in einer horizontalen Box auch nach der Reduzierung auf ihre minimalen Breiten nicht auf eine Linie passen, werden die Kinder nacheinander auf eine neue Linie verschoben, bis die verbleibenden Elemente auf der vorherigen Linie passen. Dieser Prozess kann sich auf eine beliebige Anzahl von Linien wiederholen. Wenn eine Linie nur ein einziges Element enthält, das nicht passt, sollte das Element auf dieser Linie verbleiben und aus der Box herausragen. Die späteren Linien werden in normal ausgerichteten Boxen unter die früheren Linien und in umgekehrt ausgerichteten Boxen 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 Raum, abgesehen von den Rändern der größten Elemente in jeder Linie. Zur Berechnung der Höhe einer Linie sollten Margen mit einem berechneten Wert von auto als gleich 0 behandelt werden.
Ein ähnlicher Prozess erfolgt für Kinder in einer vertikalen Box. Spätere Linien in normal ausgerichteten Boxen werden rechts von den früheren Linien platziert und in umgekehrt ausgerichteten Boxen links.
Sobald die Anzahl der Linien bestimmt wurde, dehnen sich Elemente mit einem berechneten Wert für box-flex ungleich 0 nach Bedarf, um den verbleibenden Raum auf den Linien auszufüllen. Jede Linie berechnet die Flexwerte unabhängig, sodass nur Elemente auf dieser Linie bei der Bewertung von box-flex und box-flex-group berücksichtigt werden. Die Anordnung der Elemente in einer Linie, wie durch die box-pack Eigenschaft angegeben, wird ebenfalls unabhängig für jede Linie berechnet.
Syntax
/* Keyword values */
box-lines: single;
box-lines: multiple;
/* Global values */
box-lines: inherit;
box-lines: initial;
box-lines: unset;
Die box-lines Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.
Werte
Formale Definition
| Anfangswert | single |
|---|---|
| Anwendbar auf | Boxelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
box-lines =
single |
multiple
Beispiele
Einfaches Anwendungsbeispiel
In der ursprünglichen Version der Spezifikation ermöglichte box-lines, dass Sie festlegen konnten, dass die Kinder Ihres Flex-Containers auf mehrere Linien umbrochen werden sollten. Dies wurde nur in WebKit-basierten Browsern mit einem Präfix unterstützt.
div {
display: box;
box-orient: horizontal;
box-lines: multiple;
}
Das moderne Flexbox-Äquivalent ist flex-wrap.
Spezifikationen
Teil keiner Norm.