Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
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' в этой спецификации. |
Кандидат в рекомендации | Начальное определение |
Совместимость с браузерами
| Возможность | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Базовая поддержка | 29 21 -webkit- | 12 12 -webkit- | 201 49 -webkit- 18 — 283 | 11 10 -ms- | 12.1 | 9 7 -webkit- |
| Absolutely-positioned flex children | Да | 12 | Нет | 10 | 12.1 | Да |
| Возможность | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Базовая поддержка | ? | ? | Да Да -webkit- | 201 49 -webkit- 18 — 283 | 12.1 | 9 7 -webkit- | ? |
| Absolutely-positioned flex children | ? | ? | ? | Нет | 12.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.