Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

CSS свойство  order определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы распологаются в восходящем порядке по значению order. Элементы с одинаковым значением order  располагаются в том порядке, в каком они находятся в исходном коде.

/* Числовые значения, в том числе отрицательные */
order: 5;
order: -5; 

/* Глобальные значения */
order: inherit;
order: initial;
order: unset;

Важно: order воздействует только на визуальный порядок элементов, но не логический порядок или табуляцию. order не должен применяться к не-визуальным медиа данным таким как речь.

Посмотрите Используем CSS flexible boxes для более подробной информации и дополнительных свойствах.

Синтаксис

Начальное значение0
Применяется кflex-элементы и абсолютно-позицированые потомки flex-контейнера
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typeцелое число
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Значения

<integer>
Представляет порядковую группу, которая присвоена flex элементу.

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

<integer>

Примеры

Имеется базовый отрывок HTML кода:

<header>...</header>
<div id='main'>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</div>
<footer>...</footer>

Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.

#main { display: flex;  text-align:center; }
#main > article { flex:1;        order: 2; }
#main > nav     { width: 200px;  order: 1; }
#main > aside   { width: 200px;  order: 3; }

Результат

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

Спецификация Статус Комментарии
CSS Flexible Box Layout Module
Определение 'order' в этой спецификации.
Кандидат в рекомендации Начальное определение

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка

29

21 -webkit-

Да

Да -webkit-

201

49 -webkit-

48 -webkit- 2

18 — 283

11

10 -ms-

12.1

9

7 -webkit-

Absolutely-positioned flex children Да Да Нет1012.1 Да
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Базовая поддержка ? ?

Да

Да -webkit-

201

49 -webkit-

48 -webkit- 2

18 — 283

?12.1

9

7 -webkit-

Absolutely-positioned flex children ? ? ? Нет1012.1 Да

1. Since Firefox 28, multi-line flexbox is supported.

2. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: chulanovskyi
 Обновлялась последний раз: chulanovskyi,