CSS order — порядок гнучких елементів
Властивість order визначає порядок виведення флексів всередині флекс-контейнера. Елементи розташовуються відповідно до значень властивості order від меншого до більшого. При рівних значеннях order елементи виводяться в тому порядку, в якому вони з'являються у вихідному коді.
Властивість впливаєлише на візуальне відображення елементів. Їхній порядок у сирцевому коді залишається незмінним.
Тут ми бачимо, що елементи розміщені у коді у порядку 1, 2, 3. Але за допомогою властивості order, ми вивели їх у зворотньому порядку: від елементу з найменшим значенням заданого для order, до елементу з найбільшим значенням.
Загальний опис
автор: NagarD
- Нотатка
-
Якщо елемент не є гнучким (флекс) елементом, властивість
автор: Svitlanaorderне буде мати ніякого ефекту. - Нотатка
-
Як значення приймається будь-яке ціле число, включаючи негативні числа і нуль.
автор: Svitlana
Синтаксис
order: number|initial|inherit;Властивість order може отримувати 3 значень:
-
number -
Будь-яке ціле число, включаючи від'ємні числа і нуль.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання.
автор: Svitlana -
inherit -
Успадкує значення від свого батьківського елемента
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.order="2" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 29 | 20 | 9 | 12.1 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 29 | 20 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
У розмітці блоки йдуть червоний → синій → зелений → рожевий, а order перешиковує їх: рожевий (1), червоний (2), зелений (3), синій (4). Працює у flex- і grid-контейнерах.
HTML
<div class="row">
<div id="myRedDIV">червоний (2)</div>
<div id="myBlueDIV">синій (4)</div>
<div id="myGreenDIV">зелений (3)</div>
<div id="myPinkDIV">рожевий (1)</div>
</div>CSS
.row {
display: flex;
gap: 6px;
}
.row div {
padding: 8px;
color: #fff;
}
#myRedDIV { order: 2; background: #c0392b; }
#myBlueDIV { order: 4; background: #0172ad; }
#myGreenDIV { order: 3; background: #2e7d32; }
#myPinkDIV { order: 1; background: #d81b60; }Приклад роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>order</code> ми можемо визначити порядок виведення нащадків гнучкого контейнера.</p>
<p>Нижче, на кожному елементі написаний його номер - порядок у розмітці. Але за домогою цієї властивості, ми перевизначили цей порядок для кожного з елементів у CSS.</p>
</div>
<ul class="wrapper">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
</ul>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 15px;
line-height: 1.45;
}
.info {
padding: 6px;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.wrapper {
display: flex;
justify-content: space-around;
list-style: none;
padding: 0;
margin: 0;
background-color: #dcdcdc;
height: 75px;
}
.wrapper li {
text-align: center;
background-color: gold;
width: 40vw;
height: 75px;
line-height: 79px;
font-weight: 700;
padding: 0 4px;
border: 2px solid #dcdcdc;
}
.wrapper li.one {
order: 10;
}
.wrapper li.two {
order: 5;
}
.wrapper li.three {
order: 20;
}
.wrapper li.four {
order: 1;
}HTML
<p>Цей приклад показує як працює властивість <code>order</code>. Змінюйте значення для властивості нижче, щоб змінити порядок відображення виділеного нащадка в контейнері нижче.</p>
<hr>
<strong>order: </strong>
<input type="number" class="input" id="order" value="2" min="0">
<strong>;</strong><br><br>
<hr>
<div class="box">
<div class="child one">order: 1;</div>
<div class="child hl">order: 2;</div>
<div class="child two">order: 3;</div>
</div>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: system-ui, sans-serif;
}
.child {
padding: 50px 16px 16px 16px;
background-color: gold;
font-size: 80%;
font-family: monospace;
text-align: center;
border: 2px solid #dcdcdc;
}
.child.one {
order: 1;
}
.child.hl {
order: 2;
background-color: #F74C32;
}
.child.two {
order: 3;
}
message {
display: none;
}
.wm {
min-height: 100px;
}
.box {
height: 150px;
background-color: #dcdcdc;
padding: 16px;
display: flex;
}
hr {
margin-bottom: 16px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var order = document.querySelector('#order').value;
document.querySelectorAll('.child.hl').forEach((n) => n.style.setProperty('order', order));
document.querySelectorAll('.child.hl').forEach((n) => n.innerHTML = 'order: ' + order + ';');
}));Демонстрація дії різних значень властивості
HTML
<p>Вибери значення <code>order</code> для потрібного блоку:</p>
<hr>
<div class="layout">
<header>
<h4>Simple website</h4>
</header>
<main>
<nav id="nav">
<input type="number" min="0" value="0" class="field" onchange="changeOrder(this.parentElement, this.value);"></input>
</nav>
<section id="wrapper">
<input type="number" min="0" value="0" class="field" onchange="changeOrder(this.parentElement, this.value);"></input>
</section>
</main>
<footer>
© 2017
</footer>
</div>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
text-align: center;
font-family: monospace;
font-size: 15px;
line-height: 1.5;
color: #222;
}
.field {
padding: 8px 16px;
font-size: 19px;
}
header {
line-height: 75px;
text-align: center;
text-transform: uppercase;
background-color: #808080;
color: #f9f9f9;
}
.box {
width: 750px;
border: 4px dashed red;
}
main {
display: flex;
}
nav,
#wrapper {
width: 50%;
padding: 56px 16px;
}
nav {
background-color: yellow;
}
#wrapper {
background-color: #eee;
}
footer {
line-height: 50px;
background-color: #000;
color: #f1f1f1;
margin-top: 16px;
}JS
function changeOrder(parent, value) {
parent.style.order = value;
}
//# sourceURL=pen.jsПростий приклад
HTML
<div class="wrapper">
<div class="gold">
<strong>1</strong>
<br><br>
<code>order: 10;</code>
</div>
<div class="red">
<strong>2</strong>
<br><br>
<code>order: 5;</code>
</div>
<div class="blue">
<strong>3</strong>
<br><br>
<code>order: 0;</code>
</div>
</div>CSS
* {
box-sizing: border-box;
}
.wrapper {
font-family: monospace;
color: #fff;
border: 2px solid #ddd;
display: flex;
padding: 16px;
justify-content: space-around;
}
.wrapper > div {
padding: 86px 0 76px 0;
font-weight: 700;
font-size: 2em;
text-align: center;
height: 75%;
width: 30%;
}
.wrapper > div > code {
font-size: .75em;
}
.gold {
background-color: gold;
order: 10;
}
.red {
background-color: red;
order: 5;
}
.blue {
background-color: steelblue;
order: 0;
}У коді елементи йдуть 1, 2, 3, 4. Властивість order виводить четвертий першим (-1), а перший — останнім.
HTML
<div class="flex">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
</div>CSS
.flex {
display: flex;
gap: 10px;
padding: 12px;
background: #eef1f5;
}
.flex > div {
flex: 1;
padding: 20px 0;
text-align: center;
background: #4a6fa5;
color: #fff;
font: bold 18px sans-serif;
}
.d { order: -1; background: #d2451e; }
.a { order: 1; }Коментарі
Коментарів ще немає — будьте першим!