flex-direction

基线 广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用： 2015 年 9 月.

flex-direction CSS 属性设置弹性项目在弹性容器中的放置方式，定义主轴和方向（正常或反向）。

试一试

请注意，row 和 row-reverse 值受弹性容器的方向性影响。如果其dir 属性为 ltr，则 row 表示从左到右的方向的水平轴，而 row-reverse 表示从右到左的方向；如果 dir 属性为 rtl，则 row 表示从右到左的方向的轴，而 row-reverse 表示从左到右的方向。

语法

css
/* 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: revert;
flex-direction: revert-layer;
flex-direction: unset;

值

接受以下值

row

弹性容器的主轴定义为与文本方向相同。main-start 和 main-end 点与内容方向相同。

row-reverse

行为与 row 相同，但 main-start 和 main-end 点与内容方向相反。

column

弹性容器的主轴与块轴相同。main-start 和 main-end 点与书写模式的 before 和 after 点相同。

column-reverse

行为与 column 相同，但 main-start 和 main-end 与内容方向相反。

无障碍访问

使用 flex-direction 属性和 row-reverse 或 column-reverse 值将导致内容的视觉呈现与 DOM 顺序之间出现脱节。这将对使用辅助技术（如屏幕阅读器）进行导航的视力障碍用户产生不利影响。如果视觉（CSS）顺序很重要，则屏幕阅读器用户将无法获得正确的阅读顺序。

正式定义

初始值row
应用于弹性容器
继承否
计算值按指定
动画类型离散

正式语法

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

示例

反转弹性容器列和行

HTML

html
<h4>This is a Column-Reverse</h4>
<div id="col-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="row-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>

CSS

css
.content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
}

#col-rev {
  flex-direction: column-reverse;
}

#row-rev {
  flex-direction: row-reverse;
}

.red {
  background-color: red;
}

.lightblue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}

结果

规范

规范
CSS 弹性盒子布局模块级别 1
# flex-direction-property

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅