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

---