1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 属性
  5. flex-direction

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

flex-direction

基线 广泛可用

自 2015年9月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

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

结果

规范

规范
CSS Flexible Box Layout Module Level 1
# flex-direction-property

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题