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


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

Властивість `order`

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

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

Нотатка:

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

Нотатка:

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

Синтаксис

order: number|initial|inherit;

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

number

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

initial

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

inherit

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

Значення без задання: 0
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.order="2"

Переглядачі

Переглядач
order

29.0

11.0

28.0

9.0

12.1

13.0

Переглядач
order

4.4

28.0

9.2

Приклади


Динамічний приклад

Демонстрація дії різних значень властивості

Простий приклад

Приклад роботи властивості

Виведе елементи у вказаній послідовності.

div#myRedDIV   {order: 2;}


div#myBlueDIV  {order: 4;}


div#myGreenDIV {order: 3;}


div#myPinkDIV  {order: 1;}

Додаткові посилання