17. 如何修改 flex 主轴方向

总结

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

一、作用说明

在 Flex 布局中，默认的主轴（main axis）方向是 水平向右 （即 row）。

通过设置 flex-direction 属性，可以灵活改变主轴的方向，从而控制子元素的排列方式。

二、语法

css 复制代码

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

三、属性值说明

属性值	描述	主轴方向
`row`	默认值，子元素从左到右水平排列	水平 →
`row-reverse`	子元素从右到左水平排列	水平 ←
`column`	子元素从上到下垂直排列	垂直 ↓
`column-reverse`	子元素从下到上垂直排列	垂直 ↑

四、示例代码

HTML 结构：

html 复制代码

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS 样式：

css 复制代码

.container {
  display: flex;
  flex-direction: column; /* 可替换为其他值 */
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  text-align: center;
  line-height: 50px;
  margin: 5px;
}

五、应用场景

场景	推荐值
水平导航栏	`row`
水平倒序布局（如 RTL 效果）	`row-reverse`
垂直菜单栏、侧边栏	`column`
倒序垂直布局（如聊天记录底部对齐）	`column-reverse`

六、注意事项

flex-direction 必须在设置了 display: flex 的容器中才生效。
修改主轴方向会影响 justify-content 和 align-items 的表现方向。
使用 row-reverse 或 column-reverse 时注意 DOM 元素顺序与视觉顺序不一致的问题。