總結

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 元素順序與視覺順序不一致的問題。

---