order
CSS свойство order определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значению order. Элементы с одинаковым значением order располагаются в том порядке, в каком они находятся в исходном коде.
Интерактивный пример
Синтаксис
css
/* Числовые значения, в том числе отрицательные */
order: 5;
order: -5;
/* Глобальные значения */
order: inherit;
order: initial;
order: unset;
Примечание: order воздействует только на визуальный порядок элементов, но не логический порядок или табуляцию. order не должен применяться к невизуальным медиаданным, таким как речь.
Посмотрите Используем CSS flexible boxes (en-US) для более подробной информации и дополнительных свойствах.
Значения
<integer>-
Представляет порядковую группу, которая присвоена flex элементу.
Формальный синтаксис
order =
<integer>
Пример
Имеется базовый отрывок HTML кода:
html
<header>...</header>
<main>
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</main>
<footer>...</footer>
Следующий CSS код должен создать классический блок контента окружённый боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.
css
main {
display: flex;
text-align: center;
}
main > article {
flex: 1;
order: 2;
}
main > nav {
width: 200px;
order: 1;
}
main > aside {
width: 200px;
order: 3;
}
Результат
Спецификация
| Specification |
|---|
| CSS Display Module Level 3 # order-property |
Совместимость с браузерами
BCD tables only load in the browser