此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 2015年9月.
CSSflex-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 表示从左到右。
查看使用 CSS 弹性盒子以了解更多的属性和信息。
语法
取值
接受以下取值：
rowflex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
row-reverse表现和 row 相同，但是置换了主轴起点和主轴终点
columnflex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
column-reverse表现和
column相同，但是置换了主轴起点和主轴终点
语法格式
flex-direction =
row|
row-reverse|
column|
column-reverse
示例
HTML
html
<h4>This is a Column-Reverse</h4><div> <div>A</div> <div>B</div> <div>C</div></div><h4>This is a Row-Reverse</h4><div> <div>A</div> <div>B</div> <div>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 |