这篇翻译不完整。请帮忙从英语翻译这篇文章

CSS flex-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;

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

初始值row
适用元素flex containers
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

查看 使用 CSS 弹性盒子 以了解更多的属性和信息.

语法

取值

接受以下取值:

row
flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
row-reverse
表现和row相同,但是置换了主轴起点和主轴终点
column
flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
column-reverse
表现和column相同,但是置换了主轴起点和主轴终点

语法格式

row | row-reverse | column | column-reverse

例子

HTML

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

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 Module
flex-direction
Candidate Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0) (behind a pref) [1] [2]
20.0 (20.0) [2]
21.0-webkit

10 -ms
11

12.10

7 -webkit

Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? 未实现 12.10 未实现

[1] 要激活Firefox 18和19的flexbox支持,用户必须将about:config首选项“layout.css.flexbox.enabled”更改为true。

[2] 从Firefox 28开始支持多行flexbox。

除了无前缀的支持外,Gecko 48.0(Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45)由于web兼容性原因,在首选项“layout.css.prefixes.webkit”之后增加了-webkit前缀版本的支持,默认设为false。 由于Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46),首选项默认为true。

参考

文档标签和贡献者

 最后编辑者: zhuangyin,