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;

请注意，值 row 和 row-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

浏览器兼容性

参见

使用 CSS 弹性盒子