总结

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

---