--- title: flex-direction slug: Web/CSS/flex-direction translation_of: Web/CSS/flex-direction ---

{{ CSSRef("CSS Flexible Boxes") }}

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;

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

{{cssinfo}}

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

语法

取值

接受以下取值:

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

语法格式

{{csssyntax("flex-direction")}}

例子

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

结果

{{ EmbedLiveSample('例子', '', '300', '', 'Web/CSS/flex-direction') }}

规范

Specification Status Comment
{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }} {{ Spec2('CSS3 Flexbox') }}  

浏览器兼容性

{{ CompatibilityTable() }}

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

10 {{ property_prefix("-ms") }}
11

 12.10

7 {{ property_prefix("-webkit") }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }} 12.10 {{ CompatNo() }}

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

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

除了无前缀的支持外，Gecko 48.0{{geckoRelease("48.0")}}由于web兼容性原因，在首选项“layout.css.prefixes.webkit”之后增加了-webkit前缀版本的支持，默认设为false。 由于Gecko 49.0 {{geckoRelease("49.0")}}，首选项默认为true。

参考