flex-direction 主轴方向属性

最后更新：2026-09-13

flex-direction flex-direction 主轴方向属性

flex-direction 属性用于定义弹性容器的主轴方向，即弹性项目在容器内的排列方向。默认情况下，项目从左到右水平排列（row），通过该属性可以轻松切换为垂直排列或反向排列。它是弹性布局中最基础的方向控制属性，决定了后续 justify-content 和 align-items 的作用轴向。

分类
初始值	row
继承	否
适用于	all
可动画	discrete
CSS 版本	CSS3
状态	标准

📝 语法

flex-direction: row | row-reverse | column | column-reverse;

⚙️ 取值

值	类型	描述
`row \| row-reverse \| column \| column-reverse`	关键字	弹性主轴方向

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
flex-direction	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

提示： row 和 row-reverse 的主轴为水平方向，column 和 column-reverse 的主轴为垂直方向。改变主轴后，justify-content 和 align-items 作用的轴向也会随之互换。

重要： row-reverse 和 column-reverse 仅改变项目的视觉排列顺序，不会改变 DOM 顺序，因此不会影响屏幕阅读器的阅读顺序和 Tab 键的焦点顺序。

❓ 常见问题

Qflex-direction 改变后，justify-content 和 align-items 会怎样？

Aflex-direction 决定主轴方向：justify-content 作用于主轴、align-items 作用于交叉轴。主轴为 row 时 justify-content 控制水平、align-items 控制垂直；切换为 column 后两者轴向互换。判断对齐效果前先确认主轴方向。

Q如何实现从右到左的布局？

A两种方式：flex-direction: row-reverse 让弹性项目从右向左排列，只影响这一组项目；对容器设置 direction: rtl 改变书写与布局方向，文本、行内元素也会跟着变。两者视觉上相近但语义不同，建议仅针对布局用 row-reverse，要同步影响文本方向才用 direction: rtl。

Qflex-direction: column 和 writing-mode 竖排有什么区别？

A两者完全不同。flex-direction: column 只把弹性项目改为垂直排列，每个项目仍是独立块，文字方向不变；writing-mode: vertical-rl 改变文本自身的书写方向，让汉字竖排。纵向布局用 flex-direction: column，中文竖排文章才用 writing-mode。