blob: 63e5134ba0feafb485bd09f490a970904c4cdddf (
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
|
---
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>
{{Compat("css.properties.flex-direction")}}
<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>
|
