17. 如何修改 flex 主轴方向

总结

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

---

一、作用说明

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

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

---

二、语法

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

---

三、属性值说明

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

---

四、示例代码

HTML 结构：

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

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 元素顺序与视觉顺序不一致的问题。

---