blob: eb1fa87ac088e8c73ae1097b26580b560ca4e6ee (
plain)
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
---
title: flex-direction
slug: Web/CSS/flex-direction
translation_of: Web/CSS/flex-direction
---
<p>{{ CSSRef("CSS Flexible Boxes") }}</p>
<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> <code><strong>flex-direction</strong></code> 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。</p>
<pre><code>/* The direction text is laid out in a line */
flex-direction: row;
/* Like <row>, but reversed */
flex-direction: row-reverse;
/* The direction in which lines of text are stacked */
flex-direction: column;
/* Like <column>, but reversed */
flex-direction: column-reverse;
/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;</code></pre>
<p>请注意，值 <code>row</code> 和 <code>row-reverse</code> 受 flex 容器的方向性的影响。 如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。</p>
<p>{{cssinfo}}</p>
<p>查看 <a href="/zh-CN/docs/Web/Guide/CSS/Flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒子</a> 以了解更多的属性和信息.</p>
<h2 id="语法">语法</h2>
<h3 id="取值">取值</h3>
<p>接受以下取值:</p>
<dl>
<dt><code>row</code></dt>
<dd>flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。</dd>
<dt><code>row-reverse</code></dt>
<dd>表现和row相同，但是置换了主轴起点和主轴终点</dd>
<dt><code>column</code></dt>
<dd>flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同</dd>
<dt><code>column-reverse</code></dt>
<dd>表现和<code>column</code>相同，但是置换了主轴起点和主轴终点</dd>
<dt>
<h3 id="语法格式">语法格式</h3>
</dt>
</dl>
{{csssyntax("flex-direction")}}
<h2 id="例子">例子</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><code><h4>This is a Column-Reverse</h4>
<div id="content">
<div id="box" style="background-color:red;">A</div>
<div id="box" style="background-color:lightblue;">B</div>
<div id="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
<div id="box1" style="background-color:red;">A</div>
<div id="box1" style="background-color:lightblue;">B</div>
<div id="box1" style="background-color:yellow;">C</div>
</div></code></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css"><code>#content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse;
}</code>
#box {
width: 50px;
height: 50px;
}
#content1 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}
#box1 {
width: 50px;
height: 50px;
}</pre>
<h3 id="结果">结果</h3>
<p>{{ EmbedLiveSample('例子', '', '300', '', 'Web/CSS/flex-direction') }}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}</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>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatGeckoDesktop("18.0")}} (behind a pref) <sup><a href="#bc1">[1]</a> <a href="#bc2">[2]</a></sup><br>
{{CompatGeckoDesktop("20.0")}} <sup><a href="#bc2">[2]</a></sup></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>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatNo() }}</td>
<td>12.10</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<p><sup><a name="bc1">[1]</a></sup> 要激活Firefox 18和19的flexbox支持，用户必须将about：config首选项“layout.css.flexbox.enabled”更改为true。</p>
<p><sup><a name="bc2">[2]</a></sup> 从Firefox 28开始支持多行flexbox。</p>
<p>除了无前缀的支持外，Gecko 48.0{{geckoRelease("48.0")}}由于web兼容性原因，在首选项“layout.css.prefixes.webkit”之后增加了-webkit前缀版本的支持，默认设为false。 由于Gecko 49.0 {{geckoRelease("49.0")}}，首选项默认为true。</p>
<h2 id="参考">参考</h2>
<ul>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒子</a></li>
</ul>
|
