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
|
---
title: flex-direction
slug: Web/CSS/flex-direction
translation_of: Web/CSS/flex-direction
---
<p>{{ CSSRef("CSS Flexible Boxes") }}</p>
<h2 id="Резюме">Резюме</h2>
<p><code>flex-direction -</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство , указывающее на то,как flex-элементы располагаются во flex-контейнере по главной оси и направлению (normal или reversed).</p>
<p>Обратите внимание, что значения <code>row</code> и <code>row-reverse</code> зависят от направления flex-контейнера. Если его атрибут <code>dir</code> равен <code>ltr</code>, <code>row</code> представляет собой горизонтальную ось, ориентированную слева направо, а <code>row-reverse</code> - справа налево; если атрибут <code>dir</code> равен <code>rtl</code>, <code>row</code> представляет собой горизонтальную ось, ориентированную справа налево, а <code>row-reverse</code> - слева направо.</p>
<p>{{cssinfo}}</p>
<p>См. <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> для детализации по свойствам и дополнительной информации.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css">/* The direction text is laid out in a line */
flex-direction: row;
/* Как <row>, но наоборот */
flex-direction: row-reverse;
/* The direction in which lines of text are stacked */
flex-direction: column;
/* Как <column>, но наоборот */
flex-direction: column-reverse;
/* Общие значения */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
</pre>
<h3 id="Значения">Значения</h3>
<p>Может принимать следующие значения::</p>
<dl>
<dt><code>row</code></dt>
<dd>Главная ось flex-контейнера определена точно так же, как направление текста. Точки <strong>main-start</strong> и <strong>main-end</strong> совпадают с направлением контента.</dd>
<dt><code>row-reverse</code></dt>
<dd>Ведет себя аналогично <code>row</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd>
<dt><code>column</code></dt>
<dd>Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки <strong>main-start</strong> и <strong>main-end</strong> такие же, как точки <strong>before</strong> и <strong>after</strong> режима записи (writing-mode).</dd>
<dt><code>column-reverse</code></dt>
<dd>Ведет себя, как <code>column</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Пример">Пример</h2>
<pre class="brush:css;highlight:[2]">element {
flex-direction: row-reverse;
}
</pre>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th>Спецификация</th>
<th>Статус</th>
<th>Примечание</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Особенность</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatGeckoDesktop("18.0")}} (behind a pref) <sup>[1][2]</sup><br>
{{CompatGeckoDesktop("20.0")}}</td>
<td>21.0{{ property_prefix("-webkit") }}</td>
<td>
<p>10 {{ property_prefix("-ms") }}<br>
11</p>
</td>
<td>12.10</td>
<td>
<p>7 {{ property_prefix("-webkit") }}</p>
</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Особенность</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>12.10</td>
<td>
<p>{{CompatNo}}</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Для активации поддержки flexbox в Firefox 18 и 19 пользователь должен сменить предпочтение about:config "layout.css.flexbox.enabled" на <code>true</code>.</p>
<p>[2] Многострочный flexbox поддерживается, начиная с Firefox 28.</p>
<h2 id="Смотрите_также">Смотрите также:</h2>
<ul>
<li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
</ul>
|
