---
# System prepended metadata

title: 主軸介紹、Flex熟練 必修技巧
tags: [css]

---

---
tags: css
---

# 主軸介紹、Flex熟練 必修技巧

* 這裡介紹主軸的概念，主軸為container對item去操作的軸線
* 軸線的css 也是要也在外層容器中 例如container

![](https://i.imgur.com/mxFq6fl.png)

### flex-direction: row; (預設)

![](https://i.imgur.com/uca5sDT.png)

### flex-direction: row-reverse; (反轉)

![](https://i.imgur.com/ny8EgB9.png)

### flex-direction: column; (上到下)

![](https://i.imgur.com/xMZuDbV.png)

### flex-direction: column-reverse; (下到上)

![](https://i.imgur.com/Bjb5ESw.png)