Пошук уроків, статей та іншого контенту
Змінюйте візуальний порядок flex-елементів без перестановки їх у HTML за допомогою властивості order.
orderВластивість order змінює візуальний порядок flex-елементів усередині flex-контейнера. Елементи при цьому не переставляються в HTML.
Щоб властивість працювала, батьківський елемент має бути flex-контейнером:
.container {
display: flex;
}Значення
.item {
order: 0;
}Значення за замовчуванням для всіх flex-елементів — 0.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Властивість order</title>
<style>
.cards {
display: flex;
gap: 16px;
padding: 16px;
background-color: #f1f5f9;
}
.card {
flex: 1;
padding: 24px;
color: white;
text-align: center;
border-radius: 8px;
}
.card--first {
order: 3;
background-color: #2563eb;
}
.card--second {
order: 1;
background-color: #16a34a;
}
.card--third {
order: 2;
background-color: #dc2626;
}
</style>
</head>
<body>
<div class="cards">
<div class="card card--first">Перший у HTML</div>
<div class="card card--second">Другий у HTML</div>
<div class="card card--third">Третій у HTML</div>
</div>
</body>
</html>У HTML елементи записані так:
Перший у HTML
Другий у HTML
Третій у HTML
А на сторінці вони відображаються так:
Другий у HTML — order: 1
Третій у HTML — order: 2
Перший у HTML — order: 3
Якщо order не вказано, елемент має значення 0.
.item-a {
order: 0;
}
.item-b {
/* order також дорівнює 0 */
}Елементи з однаковим значенням order зберігають порядок, у якому вони записані в HTML.
Додатні значення переміщують елемент після елементів зі значенням 0.
.item--highlighted {
order: 1;
}Елементи зі стандартним order: 0 будуть перед .item--highlighted.
Від’ємні значення переміщують елемент на початок flex-контейнера.
.item--important {
order: -1;
}Наприклад:
.first {
order: -1;
}
.second {
order: 0;
}
.third {
order: 1;
}Візуальний порядок буде таким:
.first
.second
.third
Якщо кілька елементів мають однакове значення order, браузер використовує їхній порядок у HTML.
<div class="item item--a">A</div>
<div class="item item--b">B</div>
<div class="item item--c">C</div>.item--a {
order: 1;
}
.item--b {
order: 1;
}
.item--c {
order: 0;
}Візуальний порядок:
C
A
B
Елементи A і B мають однаковий order, тому A залишається перед B.
order часто використовують у медіазапитах, щоб змінити розташування елементів на вузьких екранах.
Наприклад, на широкому екрані спочатку може відображатися основний матеріал, а потім бічна панель. На мобільному пристрої бічну панель можна показати після основного матеріалу або перед ним.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Адаптивний порядок</title>
<style>
.layout {
display: flex;
gap: 24px;
max-width: 900px;
margin: 0 auto;
padding: 24px;
}
.main {
flex: 3;
padding: 24px;
background-color: #dbeafe;
}
.sidebar {
flex: 1;
padding: 24px;
background-color: #dcfce7;
}
@media (max-width: 600px) {
.layout {
flex-direction: column;
}
.main {
order: 1;
}
.sidebar {
order: 2;
}
}
</style>
</head>
<body>
<main class="layout">
<article class="main">
<h1>Основний матеріал</h1>
<p>Тут розміщено головний вміст сторінки.</p>
</article>
<aside class="sidebar">
<h2>Додаткова інформація</h2>
<p>Цей блок містить другорядний вміст.</p>
</aside>
</main>
</body>
</html>У цьому прикладі:
на широкому екрані елементи розташовані в ряд;
на вузькому екрані flex-direction: column розміщує їх вертикально;
order визначає, який блок буде першим у вертикальному напрямку.
Якщо порядок у HTML уже правильний для мобільної версії, значення order можна не задавати взагалі. Важливо не додавати його без потреби.
order змінює лише візуальне розташування елементів. HTML-документ залишається незмінним.
Це має значення для:
навігації за допомогою клавіатури;
програм читання з екрана;
логічного сприйняття сторінки;
індексації та структури документа.
Наприклад, якщо в HTML спочатку записано кнопку «Видалити», а потім кнопку «Зберегти», але за допомогою order візуально показати спочатку «Зберегти», порядок у DOM і порядок взаємодії можуть не збігатися.
Тому основний зміст потрібно записувати в HTML у логічному порядку, а order використовувати переважно для візуальних змін макета.
<div class="actions">
<button class="save-button" type="button">Зберегти</button>
<button class="cancel-button" type="button">Скасувати</button>
</div>У цьому випадку HTML уже містить природний порядок дій. Не варто без причини змінювати його через CSS.
order разом із flex-directionorder працює відповідно до напрямку flex-контейнера.
Для стандартного напрямку:
.container {
display: flex;
flex-direction: row;
}елементи сортуються зліва направо.
Для вертикального напрямку:
.container {
display: flex;
flex-direction: column;
}елементи сортуються зверху вниз.
Наприклад:
.container {
display: flex;
flex-direction: column;
}
.item--top {
order: -1;
}.item--top буде першим зверху, навіть якщо в HTML він записаний не першим.
orderВластивість доречна, коли:
потрібно змінити розташування flex-елементів у конкретному макеті;
HTML уже має логічну структуру;
на різних ширинах екрана потрібен різний візуальний порядок;
потрібно перемістити другорядний блок після основного на мобільному екрані.
Для складної перебудови документа краще переглянути HTML-структуру, а не створювати велику кількість правил order.
order не до flex-елементаorder працює для дочірніх елементів flex-контейнера.
.container {
display: flex;
}
.item {
order: 1;
}Якщо .container не має display: flex, властивість order не змінить порядок звичайних блоків.
order: 1 означає перший елементЗначення 1 не означає «поставити першим». Воно лише визначає позицію відносно інших значень.
.first {
order: 0;
}
.second {
order: 1;
}Першим буде .first, тому що 0 менше за 1.
Щоб елемент став перед елементами зі стандартним значенням 0, потрібно використати від’ємне значення:
.first {
order: -1;
}order усім елементам без потребиТакий код складніше підтримувати:
.item-a {
order: 3;
}
.item-b {
order: 1;
}
.item-c {
order: 2;
}Якщо достатньо перемістити один елемент, краще змінити лише його порядок:
.item-a {
order: 1;
}order і HTML-порядкомCSS не переставляє елементи в DOM. Візуальний порядок може відрізнятися від порядку читання та навігації.
Для важливого контенту спочатку створіть правильну HTML-структуру, а потім використовуйте order лише для необхідної візуальної адаптації.
order змінює візуальний порядок flex-елементів.
Значення за замовчуванням — 0.
Елементи сортуються від найменшого значення до найбільшого.
Від’ємні значення переміщують елементи на початок.
Елементи з однаковим order зберігають порядок із HTML.
Властивість працює лише для дочірніх елементів flex-контейнера.
order не змінює порядок елементів у DOM.
Для доступності HTML потрібно будувати в логічній послідовності, навіть якщо візуальний порядок змінюється через CSS.