This page was translated from English by the community.Learn more and join the MDN Web Docs community.
order
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2015 г..
CSS свойствоorder определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значениюorder. Элементы с одинаковым значениемorder располагаются в том порядке, в каком они находятся в исходном коде.
Интерактивный пример
order: 0;order: 3;order: -1;order: 2;<section> <div>Box 1:</div> <div>Box 2: <code>order: 1;</code></div> <div>Box 3: <code>order: 2;</code></div> <div>Box 4: <code>order: 2;</code></div> <div>Box 5: <code>order: 3;</code></div></section>.default-example { max-height: 300px; display: flex; flex-flow: column;}.default-example > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; margin: 0.5rem; padding: 0.5rem; flex: 1;}#example-element { background-color: rgba(255, 0, 200, 0.2); border: 3px solid rebeccapurple;}#example-element::after { content: attr(style); outline: 2px dashed; font-family: monospace;}Синтаксис
/* Числовые значения, в том числе отрицательные */order: 5;order: -5;/* Глобальные значения */order: inherit;order: initial;order: unset;Примечание:order воздействует только навизуальный порядок элементов, но не логический порядок или табуляцию.order не должен применяться к невизуальным медиаданным, таким как речь.
ПосмотритеИспользуем CSS flexible boxes для более подробной информации и дополнительных свойствах.
Значения
<integer>Представляет порядковую группу, которая присвоена flex элементу.
Формальный синтаксис
order =
<integer>
Пример
Имеется базовый отрывок HTML кода:
<header>...</header><main> <article>Article</article> <nav>Nav</nav> <aside>Aside</aside></main><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;}Результат
Спецификации
| Specification |
|---|
| CSS Display Module Level 3 # order-property |