order
Меняет видимый порядок flex- или grid-элемента.
Синтаксис
order: number;Значения
| Параметр | Тип | Описание |
|---|---|---|
| 0 | integer | По умолчанию: элементы идут по разметке. |
| number | integer | Элементы с меньшим номером идут раньше; можно отрицательные. |
Примеры
Второй элемент переезжает вперёд:
<style>
.row { display: flex; gap: 6px; }
.row div { padding: 6px 12px; background: lightgreen; }
</style>
<div class="row">
<div>1</div>
<div style="order: -1;">2 (order: -1)</div>
<div>3</div>
</div>Примечания
order меняет только то, что видно: клавиша Tab и экранные чтецы всё равно следуют разметке. Используйте его для небольших правок раскладки, а не для перестановки важного содержимого.
См. также
- flex-direction — Направление главной оси flex-контейнера: элементы в ряд или в столбик.
- grid-area — Помещает элемент сетки в именованную область или между заданными линиями.
Вопросы и ответы по теме
В учебнике
- Flex-элементы — Как управлять отдельными элементами во flexbox — flex-grow, flex-shrink, flex-basis, сокращение flex, align-self, order и margin auto.