🔀 Властивість CSS order

Поточний порядок:
2 3 4 1

CSS властивість order визначає порядок, який використовується для розміщення flex-елементів у їх flex-контейнері. Елементи розташовуються у порядку зростання за значенням order. Елементи з однаковим значенням order розташовуються в тому порядку, в якому вони знаходяться у вихідному коді.

Оберіть варіант порядку:
←
→
1
Початкова позиція: 1
2
Початкова позиція: 2
3
Початкова позиція: 3
4
Початкова позиція: 4

Як працює властивість order?

За замовчуванням всі flex-елементи мають order: 0. Елементи розташовуються від найменшого значення order до найбільшого. Елементи з однаковим значенням зберігають свій порядок у HTML-коді.

🎯 1 2 3 4
1
2
3
4
Початковий порядок. Всі елементи мають order: 0 (або однакове значення), тому зберігається порядок з HTML.
/* Всі елементи мають order: 0 (за замовчуванням) */
🎯 2 3 4 1
2
3
4
1
Перший елемент переміщується в кінець. Значення order: .item1 { order: 1; }
.item1 { order: 1; } /* Решта елементів: order: 0 */
🎯 2 4 3 1
2
4
3
1
Складний порядок: елемент 2 перший (order: 1), елемент 4 другий (order: 2), елемент 3 третій (order: 3), елемент 1 останній (order: 4).
.item1 { order: 4; } .item2 { order: 1; } .item3 { order: 3; } .item4 { order: 2; }

🔧 Інтерактивна демонстрація CSS Flexbox | Українська версія

Спробуйте всі варіанти, щоб зрозуміти як працює перестановка елементів!