规定灵活项目的方向 | flex-direction

flex-direction

CSSflex-direction属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

/* 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;

请注意，值row和row-reverse受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

Initial value	row
Applies to	flex containers
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

取值

接受下列值：

rowflex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。

形式语法

row | row-reverse | column | column-reverse

例

HTML

<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>

CSS

#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

.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;
}

结果

规范

Specification	Status	Comment
CSS Flexible Box Layout ModuleThe definition of 'flex-direction' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Edge	Internet Explorer	Opera	Safari
Basic support	18.0 (18.0)1 20.0 (20.0) 28.0 (28.0)2	21.0-webkit	(Yes)-webkit (Yes)	10 -ms 11	12.10	7 -webkit

Feature	Firefox Mobile (Gecko)	Android	Edge	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	?	(Yes)-webkit (Yes)	No support	12.10	No support