1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: order
slug: Web/CSS/order
tags:
- CSS
- CSS Flexible Boxes
- Порядок
translation_of: Web/CSS/order
---
<div>{{CSSRef}}</div>
<h2 id="Загальний_огляд">Загальний огляд</h2>
<p><a href="/en-US/docs/Web/CSS">CSS</a> параметр <strong><code>order</code></strong> визначає порядок розташування flex елементів відносно їхнього батьківського flex контейнера. Елементи розташовуються у порядку зростання значення order. Елементи з однаковим значенням параметра <code>order</code> розташовуються в такому порядку, в якому вони розташовані в основному коді.</p>
<div class="note">
<p><strong>Примітка</strong>: параметр <code>order</code> лише впливає на <strong>візуальний порядок</strong> елементів і не впливає на їх логічний порядок або порядок табуляції. <code><strong>order</strong></code> не повинен використовуватися на невізуальних носіях, таких як голосові читалки.</p>
</div>
<p>{{cssinfo}}</p>
<p>Дивіться <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Використання CSS flexible boxes</a> для більш детальної інформації, а також опису інших параметрів.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css">/* Числові значення включаючи від'ємні числа */
order: 5;
order: -5;
/* Глобальні значення */
order: inherit;
order: initial;
order: unset;
</pre>
<h3 id="Значення">Значення</h3>
<dl>
<dt><code><integer></code></dt>
<dd>Відображає порядковий номер групи, до якої flex елемент був присвоєний.</dd>
</dl>
<h3 id="Офіційний_синтаксис">Офіційний синтаксис</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Приклади">Приклади</h2>
<p>Тут є базовий уривок HTML:</p>
<pre class="brush:html;"><!DOCTYPE html>
<header>...</header>
<div id='main'>
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>...</footer></pre>
<p>Наступний CSS код повинен створити класичний шаблон з двома бічними панелями, які оточують блок з контентом. Flexible Box Layout Module автоматично створює блоки з однаковими вертикальними розмірами і буде займати стільки горизонтального простору, скільки буде доступно.</p>
<pre class="brush:css;">#main { display: flex; text-align:center; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }</pre>
<h3 id="Результат">Результат</h3>
<p>{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}</p>
<h2 id="sect1"> </h2>
<h2 id="Специфікації">Специфікації</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Специфікація</th>
<th scope="col">Статус</th>
<th scope="col">Коментар</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Початкове визначення</td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Особливість</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базова підтримка</td>
<td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<br>
29</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
{{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td>
<td>
<p>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
11</p>
</td>
<td>12.10</td>
<td>7 {{property_prefix("-webkit")}}<br>
9</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Особливість</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базова підтримка</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup><br>
{{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td>
<td>{{CompatUnknown}}</td>
<td>12.10</td>
<td>7 {{property_prefix("-webkit")}}<br>
9</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Щоб активувати підтримку Flexbox для Firefox 18 або 19, користувач повинен змінити about:config preference <code>layout.css.flexbox.enabled</code> на <code>true</code>. Багаторядкові flexible boxes підтримуються з Firefox 28.</p>
<p>Firefox на даний час неправильно змінює порядок табуляції елементів. Дивитися {{bug("812687")}}.</p>
<p>[2] На додаток до підтримки без префікса, Gecko 48.0 {{geckoRelease("48.0")}} добавила підтримку для <code>-webkit</code> префіксної версії даного параметра, for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
<p>[3] В Internet Explorer 10, flexible контейнер декларуєтсья з використанням префікса '-ms' <code>display:-ms-flexbox,</code> а не <code>display:flex</code>. Даний параметр реалізований під нестандартним іменем <code>-ms-flex-order</code>.</p>
<h2 id="Дивитися_також">Дивитися також</h2>
<ul>
<li><a href="/docs/Web/Guide/CSS/Flexible_boxes">Використання CSS flexible boxes</a></li>
</ul>
|
