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

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' в этой спецификации.
Кандидат в рекомендации Начальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 21
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 48
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено 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.
Нет поддержки 18 — 28
Отключено
Отключено 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.
IE Полная поддержка 11
Полная поддержка 11
Полная поддержка 10
С префиксом
С префиксом Требует вендорный префикс: -ms-
Opera Полная поддержка 12.1Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 48
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено 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.
Нет поддержки 18 — 28
Отключено
Отключено 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.
Opera Android Полная поддержка 12.1Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android ?
Absolutely-positioned flex childrenChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Нет поддержки НетIE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка ДаWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Нет поддержки НетOpera Android Полная поддержка 12.1Safari iOS Полная поддержка ДаSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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

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

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