flex-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

css
/* 文本排成行的方向 */
flex-direction: row;

/* 类似于 <row>,但方向相反 */
flex-direction: row-reverse;

/* 文本行堆叠的方向 */
flex-direction: column;

/* 类似于 <column>,但方向相反 */
flex-direction: column-reverse;

/* 全局值 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;

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

初始值row
适用元素弹性容器
是否是继承属性
计算值as specified
动画类型离散值

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

语法

取值

接受以下取值:

row

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

row-reverse

表现和 row 相同,但是置换了主轴起点和主轴终点

column

flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

column-reverse

表现和column相同,但是置换了主轴起点和主轴终点

语法格式

flex-direction = 
row |
row-reverse |
column |
column-reverse

示例

HTML

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

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
CSS Flexible Box Layout Module Level 1
# flex-direction-property

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flex-direction
column
column-reverse
row
row-reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见