Свойство CSS `box-ordinal-group`

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

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

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

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

Порядковые группы можно использовать совместно со свойством box-direction, чтобы управлять порядком отображения непосредственных дочерних элементов блока. Если вычисленное значение box-direction равно normal, блок отображает элементы, начиная с порядковой группы с наименьшим номером, и размещает их слева (для горизонтальных блоков) или сверху (для вертикальных блоков) контейнера. Элементы с одинаковой порядковой группой располагаются в том порядке, в котором они указаны в дереве исходного документа. При обратном направлении порядковые группы обрабатываются в том же порядке, но элементы отображаются в обратном порядке.

Синтаксис

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

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

Для свойства box-ordinal-group указывается любое положительное значение <integer>.

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

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

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

box-ordinal-group = <integer>

Примеры

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

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

article:nth-child(1) {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
}

article:nth-child(2) {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  box-ordinal-group: 1;
}

Современный аналог для flexbox — order.

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

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

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`box-ordinal-group`	1	12	49 1	15	3 1.1–3	18	49 4	14	1	1.0	4.4	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-ordinal-group