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. Es wurde in der Spezifikation ersetzt. Siehe flexbox für Informationen über den aktuellen Standard.
Die box-lines
-Eigenschaft von CSS bestimmt, ob die Box eine einzelne oder mehrere Linien (Zeilen für horizontal ausgerichtete Boxen, Spalten für vertikal ausgerichtete Boxen) haben kann.
Standardmäßig legt eine horizontale Box ihre Kinder in einer einzigen Zeile 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 Zeile 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 Zeilen oder Spalten) ausdehnen, um alle ihre Kinder aufzunehmen. Die Box muss versuchen, ihre Kinder auf so wenige Linien wie möglich zu verteilen, indem sie alle Elemente bei Bedarf auf ihre minimalen Breiten oder Höhen verkleinert.
Wenn die Kinder in einer horizontalen Box nach der Verkleinerung auf ihre Mindestbreiten immer noch nicht in eine Zeile passen, werden Kinder eins nach dem anderen auf eine neue Zeile verschoben, bis die verbleibenden Elemente in der vorherigen Zeile passen. Dieser Vorgang kann bis zu einer beliebigen Anzahl von Linien wiederholt werden. Wenn eine Zeile nur ein Element enthält, das nicht passt, sollte das Element in dieser Zeile bleiben und über die Box hinausragen. Die späteren Zeilen werden in normalen Richtungsboxen unterhalb der 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. Zwischen den Zeilen erscheinen keine zusätzlichen Abstände, abgesehen von den Rändern der größten Elemente in jeder Zeile. Für die Berechnung der Höhe einer Zeile sollten Ränder mit einem berechneten Wert von auto als Wert 0 behandelt werden.
Ein ähnlicher Prozess erfolgt für Kinder in einer vertikalen Box. Spätere Zeilen in normalen Richtungsboxen werden rechts von früheren Zeilen platziert und in umgekehrten Richtungsboxen links.
Sobald die Anzahl der Linien bestimmt wurde, dehnen sich Elemente mit einem berechneten Wert für box-flex
ungleich 0
bei Bedarf aus, um zu versuchen, den verbleibenden Platz auf den Linien zu füllen. Jede Linie berechnet Flex unabhängig, sodass nur Elemente auf dieser Linie betrachtet werden, wenn box-flex
und box-flex-group
bewertet werden. Die Anordnung der Elemente in einer Linie, wie sie durch die box-pack
-Eigenschaft angegeben wird, 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
Grundlegendes Anwendungsbeispiel
In der ursprünglichen Version der Spezifikation erlaubte box-lines
, dass die Kinder Ihres Flex-Containers in mehreren Linien umgebrochen werden konnten. 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
Nicht Teil eines Standards.