`box-flex-group` — CSS-свойство

Устарело: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему её поддерживать, она уже могла быть исключена из соответствующих веб-стандартов, её исключение может быть запланировано или её могут сохранять только в целях совместимости. Избегайте её использования и, если возможно, обновите существующий код; при принятии решения воспользуйтесь таблицей совместимости внизу этой страницы. Учтите, что эта функция может перестать работать в любой момент.

Нестандартное: Эта функция не является стандартной и не входит в процесс стандартизации. Не используйте её на общедоступных сайтах: она будет работать не у всех пользователей. Кроме того, реализации могут существенно различаться, а поведение может измениться в будущем.

Предупреждение: Это свойство из первоначального черновика модуля CSS Flexible Box Layout. В спецификации его заменили. Информацию о действующем стандарте см. в статье о flexbox.

Свойство box-flex-group CSS распределяет дочерние элементы flexbox по flex-группам.

Для гибких элементов, назначенных flex-группам, первой flex-группе присваивается значение 1, а более высокие значения обозначают последующие flex-группы. Начальное значение — 1. При распределении дополнительного пространства в блоке браузер сначала рассматривает все элементы первой flex-группы. Каждому элементу этой группы выделяется дополнительное пространство в соответствии с соотношением его гибкости и гибкости других элементов той же flex-группы. Если пространство всех гибких дочерних элементов группы увеличено до максимума, процесс повторяется для дочерних элементов следующей flex-группы, которым выделяется пространство, оставшееся после предыдущей flex-группы. Если flex-групп больше нет, но пространство ещё осталось, дополнительное пространство распределяется внутри содержащего блока согласно свойству box-pack.

Если после вычисления предпочтительного пространства для дочерних элементов блок будет переполняться, пространство удаляется у гибких элементов способом, аналогичным его добавлению. Группы рассматриваются по очереди, а пространство удаляется пропорционально гибкости каждого элемента. Ширина элементов не уменьшается ниже их минимальной ширины.

Синтаксис

/* <integer> values */
box-flex-group: 1;
box-flex-group: 5;

/* Global values */
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;

Свойству box-flex-group задаётся любое положительное <integer>.

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

Начальное значение	1
Применяется к	потоковым дочерним элементам элементов box
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	дискретный

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

box-flex-group = <integer>

Примеры

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

В первоначальной спецификации flexbox с помощью box-flex-group можно было распределять дочерние элементы flex-контейнера по разным группам, чтобы распределить между ними гибкое пространство:

article:nth-child(1) {
  -webkit-box-flex-group: 1;
}

article:nth-child(2) {
  -webkit-box-flex-group: 2;
}

Эта возможность поддерживалась только в браузерах на основе WebKit, с префиксом, а в последующих версиях спецификации у неё не появилось эквивалента. Теперь пространство внутри flex-контейнера распределяется с помощью свойств flex-basis, flex-grow и flex-shrink.

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

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

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`box-flex-group`	1–67	Нет	Нет	15–54	3 1.1–3	18–67	Нет	14–48	1	1.0–9.0	4.4–67	1

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-flex-group