Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
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.