css властивість order

Властивість order визначає порядок виведення флексів всередині флекс-контейнера. Елементи розташовуються відповідно до значень властивості order від меншого до більшого. При рівних значеннях order елементи виводяться в тому порядку, в якому вони з'являються у вихідному коді.

Властивість впливаєлише на візуальне відображення елементів. Їхній порядок у сирцевому коді залишається незмінним.

Тут ми бачимо, що елементи розміщені у коді у порядку 1, 2, 3. Але за допомогою властивості order, ми вивели їх у зворотньому порядку: від елементу з найменшим значенням заданого для order, до елементу з найбільшим значенням.

правити

Нотатка

Якщо елемент не є гнучким (флекс) елементом, властивість order не буде мати ніякого ефекту.

автор: Svitlana правити

Нотатка

Як значення приймається будь-яке ціле число, включаючи негативні числа і нуль.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

order: number|initial|inherit;

Властивість order може отримувати 3 значень:

number

Будь-яке ціле число, включаючи від'ємні числа і нуль.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання.

автор: Svitlana

правити

inherit

Успадкує значення від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
order	29.0	28.0	9.0	12.1	13.0	11.0

Підтримка: мобільні переглядачі

Переглядач
order	4.4	28.0	9.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="row">
    <div id="myRedDIV">червоний (2)</div>
    <div id="myBlueDIV">синій (4)</div>
    <div id="myGreenDIV">зелений (3)</div>
    <div id="myPinkDIV">рожевий (1)</div>
</div>

.row {
    display: flex;
    gap: 6px;
}

.row div {
    padding: 8px;
    color: #fff;
}

#myRedDIV   { order: 2; background: #c0392b; }
#myBlueDIV  { order: 4; background: #0172ad; }
#myGreenDIV { order: 3; background: #2e7d32; }
#myPinkDIV  { order: 1; background: #d81b60; }