`box-lines` свойство CSS

Свойство box-lines CSS определяет, может ли блок содержать одну или несколько строк (строк для блоков с горизонтальной ориентацией, столбцов для блоков с вертикальной ориентацией).

По умолчанию горизонтальный блок размещает дочерние элементы в одной строке, а вертикальный блок — в одном столбце. Это поведение можно изменить с помощью свойства box-lines. Значение по умолчанию — single: это означает, что все элементы будут размещены в одной строке или столбце, а элементы, которые не помещаются, будут считаться переполняющими содержимое.

Однако если указано значение multiple, блок может расширяться на несколько строк (то есть на несколько рядов или столбцов), чтобы вместить все дочерние элементы. При необходимости блок должен попытаться разместить дочерние элементы в минимальном количестве строк, уменьшив размеры всех элементов до минимальной ширины или высоты.

Если дочерние элементы горизонтального блока всё ещё не помещаются в строке после уменьшения до минимальной ширины, элементы по одному перемещаются в новую строку, пока оставшиеся в предыдущей строке элементы не поместятся. Этот процесс может повторяться для произвольного количества строк. Если в строке остался только один элемент, который не помещается, он должен остаться в этой строке и выходить за пределы блока. В блоках с обычным направлением следующие строки располагаются ниже предыдущих, а в блоках с обратным направлением — выше. Высота строки равна высоте самого высокого дочернего элемента в этой строке. Между строками не появляется дополнительное пространство, кроме отступов у самых крупных элементов в каждой строке. При вычислении высоты строки отступам с вычисленным значением auto следует присваивать значение 0.

Для дочерних элементов вертикального блока происходит аналогичный процесс. В блоках с обычным направлением следующие строки располагаются справа от предыдущих, а в блоках с обратным направлением — слева.

После определения количества строк элементы, для свойства box-flex которых вычислено значение, отличное от 0, растягиваются при необходимости, чтобы заполнить оставшееся пространство в строках. Расчёт flex выполняется независимо для каждой строки, поэтому при вычислении box-flex и box-flex-group учитываются только элементы в этой строке. Расположение элементов в строке, задаваемое свойством box-pack, также вычисляется отдельно для каждой строки.

Синтаксис

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

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

Значения

Это свойство задаётся одним из следующих ключевых слов:

single

Элементы блока располагаются в одной строке или столбце.

multiple

Элементы блока располагаются в нескольких строках или столбцах.

Формальное определение

Формальный синтаксис

box-lines = single | multiple

Примеры

Пример базового использования

В первоначальной версии спецификации box-lines позволял указать, что дочерние элементы flex-контейнера должны переноситься на несколько строк. Эта возможность поддерживалась только в браузерах на основе WebKit и требовала префикса.

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

Современный эквивалент для flexbox — flex-wrap.

Спецификации

Не входит ни в один стандарт.

Совместимость с браузерами

См. также

• flex
• flex-basis
• flex-grow
• flex-shrink