1. Главная
2. CSS
3. Свойство order

СВОЙСТВО ORDER

Свойство order позволяет устанавливать порядок размещения элементов во флекс контейнере.

Поддержка браузеров

Синтаксис

order: число|initial|inherit

Значения свойства

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="flex">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.flex {
    display: flex;
    align-items: center;
    width: 360px;
    height: 200px;
    border: 1px solid #ddd
}

.item {
    height: 120px;
    width: 120px
}

.item:nth-child(1) {
    background: yellow;
    order: 2
}

.item:nth-child(2) {
    background: blue;
    order: 3
}

.item:nth-child(3) {
    background: beige;
    order: 1
}