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;}

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