css властивість order
Властивість order визначає порядок виведення флексів всередині флекс-контейнера. Елементи розташовуються відповідно до значень властивості order від меншого до більшого. При рівних значеннях order елементи виводяться в тому порядку, в якому вони з'являються у вихідному коді.
Властивість впливаєлише на візуальне відображення елементів. Їхній порядок у сирцевому коді залишається незмінним.
Тут ми бачимо, що елементи розміщені у коді у порядку 1, 2, 3. Але за допомогою властивості 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;}