box-lines — CSS: Каскадные таблицы стилей
Нестандартный: Эта функция является нестандартной и не соответствует стандартам. Не используйте его на рабочих сайтах, выходящих в Интернет: он не будет работать для каждого пользователя. Также могут быть большие несовместимости между реализациями, и поведение может измениться в будущем.
Устарело: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе исключения или может быть сохранен только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.
Предупреждение: Это свойство исходного черновика модуля CSS Flexible Box Layout. Он был заменен в спецификации.
См. flexbox для получения информации о текущем стандарте.
Свойство CSS box-lines определяет, может ли блок иметь одну или несколько строк (строки для горизонтально ориентированных блоков, столбцы для вертикально ориентированных блоков).
/* Значения ключевых слов */ бокс-линии: одинарные; бокс-линии: несколько; /* Глобальные значения */ бокс-линии: наследовать; бокс-линии: начальный; бокс-линии: не установлены;
По умолчанию дочерние элементы горизонтального блока размещаются в одной строке, а вертикального блока — в одном столбце. Это поведение можно изменить с помощью свойства box-lines . Значение по умолчанию — single , что означает, что все элементы будут помещены в одну строку или столбец, а любые неподходящие элементы будут считаться переполненными.
Если указано значение , умноженное на , то поле может расширяться до нескольких строк (то есть нескольких строк или столбцов), чтобы вместить все его дочерние элементы.
Блок должен пытаться разместить своих дочерних элементов на как можно меньшем количестве строк, уменьшая все элементы до их минимальной ширины или высоты, если это необходимо.
Если дочерние элементы в горизонтальном блоке по-прежнему не помещаются на строке после уменьшения их ширины до минимальной, то дочерние элементы перемещаются один за другим на новую строку, пока элементы, оставшиеся на предыдущей строке, не помещаются. Этот процесс может повторяться до произвольного количества строк. Если строка содержит только один элемент, который не помещается, то этот элемент должен остаться на этой строке и выйти за пределы поля. Более поздние строки помещаются ниже более ранних строк в полях нормального направления и выше в полях обратного направления. Высота строки — это высота самого большого дочернего элемента в этой строке. Между строками не появляется дополнительное пространство, кроме полей самых больших элементов в каждой строке. Для расчета высоты строки поля с вычисленным значением auto следует рассматривать как имеющие значение 0,9.
Аналогичный процесс происходит для детей в вертикальной коробке. Ячейки более поздних строк в нормальном направлении размещаются справа от ячеек более ранних строк и слева в ячейках обратного направления.
После определения количества строк элементы с вычисленным значением для box-flex , отличным от 0 , растягиваются по мере необходимости, пытаясь заполнить оставшееся пространство в строках. Каждая строка вычисляет изгибы независимо, поэтому при оценке 9 учитываются только элементы в этой строке.0016 box-flex
box-flex-groups . Упаковка элементов в строке, как указано в свойстве box-pack , также вычисляется независимо для каждой строки. Свойство box-lines указано как одно из значений ключевого слова, перечисленных ниже.
Значения
-
одиночные Элементы блока размещаются в одной строке или столбце.
-
несколько Расположение элементов блока в несколько строк или столбцов.
| Исходное значение | |
|---|---|
| Применяется к | коробчатым элементам |
| Унаследовано | нет |
| Расчетное значение | как указано |
| Тип анимации | дискретный |
прямоугольников = сингл | несколько
Простой пример использования
В исходной версии спецификации box-lines позволяли указать, что вы хотите, чтобы дочерние элементы вашего гибкого контейнера переносились на несколько строк. Это поддерживалось только в браузерах на основе WebKit с префиксом.
дел {
дисплей: коробка;
коробчатая ориентация: горизонтальная;
бокс-линии: несколько;
}
Современный эквивалент flexbox — flex-wrap .
Не является частью какого-либо стандарта.
Таблицы BCD загружаются только в браузере с включенным JavaScript.
Включите JavaScript для просмотра данных.
-
гибкий -
гибкая основа -
гибкий рост -
гибкий термоусадочный
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять более активное участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Могу ли я отправить электронное письмо… box-shadow
Могу ли я отправить электронное письмо… box-shadowGmail
Настольная веб-почта
2019-02
2023-01
iOS
2019-02
1
2023-01
1
Андроид
2021-08
1
2023-01
1
Мобильная веб-почта
2020-02
Перспектива
Окна
2007
2010
2013
2016
2019
Почта Windows
2019-02
macOS
2019-02
Outlook.
2019-02
2023-01
iOS
2019-02
2023-01
Андроид
2019-02
2023-01
Яху! Почта
Настольная веб-почта
2019-02
2023-01
iOS
2019-02
2023-01
Андроид
2019-02
2023-01
АОЛ
Настольная веб-почта
2019-02
iOS
2019-02
2023-01
Андроид
2019-02
2023-01
Мозилла Тандерберд
ПротонПочта
Настольная веб-почта
2020-03
iOS
2020-03
Андроид
2020-03
Быстрая почта
Настольная веб-почта
2021-07
ПРИВЕТ
Настольная веб-почта
2020-06
Апельсин
Настольная веб-почта
2019-08
2021-03
iOS
2019-08
Андроид
2019-08
LaPoste.
