flex-direction
CSS
property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Note that the values
row
and
row-reverse
are affected by the directionality of the flex container. If its
dir
属性为
ltr
,
row
represents the horizontal axis oriented from the left to the right, and
row-reverse
from the right to the left; if the
dir
属性为
rtl
,
row
represents the axis oriented from the right to the left, and
row-reverse
from the left to the right.
/* 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;
The following values are accepted:
row
row-reverse
row
but the
main-start
and
main-end
points are permuted.
column
column-reverse
column
but the
main-start
and
main-end
are permuted.
使用
flex-direction
property with values of
row-reverse
or
column-reverse
will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.
| 初始值 |
row
|
|---|---|
| 适用于 | flex containers |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
row | row-reverse | column | column-reverse
<h4>This is a Column-Reverse</h4> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> </div> <h4>This is a Row-Reverse</h4> <div id="content1"> <div class="box1" style="background-color:red;">A</div> <div class="box1" style="background-color:lightblue;">B</div> <div class="box1" style="background-color:yellow;">C</div> </div>
#content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: column-reverse;
}
.box {
width: 50px;
height: 50px;
}
#content1 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row-reverse;
}
.box1 {
width: 50px;
height: 50px;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Flexible Box Layout Module
The definition of 'flex-direction' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-direction
|
Chrome 完整支持 29 | Edge 完整支持 12 |
Firefox
部分支持
20
注意事项
|
IE
完整支持
11
|
Opera 完整支持 12.1 | Safari 完整支持 9 | WebView Android 完整支持 4.4 | Chrome Android 完整支持 29 |
Firefox Android
部分支持
20
注意事项
|
Opera Android 完整支持 12.1 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 2.0 |
完整支持
部分支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
order