order

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

Загальний огляд

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

Примітка: параметр order лише впливає на візуальний порядок елементів і не впливає на їх логічний порядок або порядок табуляції. order не повинен використовуватися на невізуальних носіях, таких як голосові читалки.

Initial value0
Applies toflex items and absolutely-positioned flex container children
Inheritedno
Mediavisual
Computed valueas specified
Animation typean integer
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Дивіться Використання CSS flexible boxes для більш детальної інформації, а також опису інших параметрів.

Синтаксис

/* Числові значення включаючи від'ємні числа */
order: 5;
order: -5; 

/* Глобальні значення */
order: inherit;
order: initial;
order: unset;

Значення

<integer>
Відображає порядковий номер групи, до якої flex елемент був присвоєний.

Офіційний синтаксис

<integer>

Приклади

Тут є базовий уривок HTML:

<!DOCTYPE html>
<header>...</header>
<div id='main'>
   <article>Article</article>
   <nav>Nav</nav>
   <aside>Aside</aside>
</div>
<footer>...</footer>

Наступний CSS код повинен створити класичний шаблон з двома бічними панелями, які оточують блок з контентом. Flexible Box Layout Module автоматично створює блоки з однаковими вертикальними розмірами і буде займати стільки горизонтального простору, скільки буде доступно.

#main { display: flex;  text-align:center; }
#main > article { flex:1;        order: 2; }
#main > nav     { width: 200px;  order: 1; }
#main > aside   { width: 200px;  order: 3; }

Результат

 

Специфікації

Специфікація Статус Коментар
CSS Flexible Box Layout Module
The definition of 'order' in that specification.
Candidate Recommendation Початкове визначення

Сумісність із браузерами

Особливість Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Базова підтримка 21.0-webkit
29
(Yes)-webkit
(Yes)
18.0 (18.0)[1]
20.0 (20.0)[2]

10.0-ms[3]
11

12.10 7 -webkit
9
Особливість Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базова підтримка ? ? (Yes)-webkit
(Yes)
18.0 (18.0)[1]
20.0 (20.0)[2]
? 12.10 7 -webkit
9

[1] Щоб активувати підтримку Flexbox для Firefox 18 або 19, користувач повинен змінити about:config preference layout.css.flexbox.enabled на true. Багаторядкові flexible boxes підтримуються з Firefox 28.

Firefox на даний час неправильно змінює порядок табуляції елементів. Дивитися bug 812687.

[2] На додаток до підтримки без префікса, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) добавила підтримку для -webkit префіксної версії даного параметра, for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] В Internet Explorer 10, flexible контейнер декларуєтсья з використанням префікса '-ms' display:-ms-flexbox, а не display:flex. Даний параметр реалізований під нестандартним іменем -ms-flex-order.

Дивитися також

Мітки документа й учасники

 Зробили внесок у цю сторінку: piton13
 Востаннє оновлена: piton13,