---
# System prepended metadata

title: FLEX 筆記3. - 容器內軸線的走向 flex-direction
tags: [CSS-FLEX]

---

# FLEX 筆記3. - 容器內軸線的走向 flex-direction

- 要熟練 Flex 必搞懂的軸線技巧

  Flex 的軸線，有「主軸」、「交錯軸」。
  
  而**主軸**在預設不做任何更動的情形下接預設為:
  
```
flex-directiom: row; (default)
```  

而 `flex-direction`，則有很多種主軸使用方式:

- 實際演練:

1. 建立一個外部容器 `container`，並包住三個 `item`

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

```
// CSS
.container {
  width: 500px;
  background: #004466;
  margin: 0 auto;
  padding: 20px;
}

.item {
  width: 100px;
  background: #00ffa2;
  color: #004466;
  font-size: 36px;
  text-align: center;
}
```
![](https://i.imgur.com/iQcB0xw.png)

2. 使用 flex 讓內容並排 (→)

   在 .container，加入 display: flex;

```
.container {
    // 加入 flex 語法
  display: flex;
  width: 500px;
  background: #004466;
  margin: 0 auto;
  padding: 20px;
}
```

- .item 就乖乖的**由左至右**給並排了

  這邊則是觸發預設的軸線路徑: `flex-direction: row;`

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

3. 將 .item 稍微左右推開一些:

```
.item {
  margin-left: 10px;
  margin-right: 10px;
  width: 100px;
  background: #00ffa2;
  color: #004466;
  font-size: 36px;
  text-align: center;
}
```

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


4. 開始測試更動主軸的流向:

   由上圖可以知道，我們預設的軸線就是由**左→右**
   那麼，接下來將依序測試各種軸線的走向
   
---

- `flex-direction: row-reverse;`

   預設 row 是左→右，**reverse** 則是反轉的意思
   
   故: 在 `.container` 寫下此段語法:
   
```
.container {
  display: flex;
  // 並排反轉
  flex-direction: row-reverse;
  width: 500px;
  background: #004466;
  margin: 0 auto;
  padding: 20px;
}

.item {
  margin-left: 10px;
  margin-right: 10px;
  width: 100px;
  background: #00ffa2;
  color: #004466;
  font-size: 36px;
  text-align: center;
}
```   

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

於是就倒過來了:)

## 主軸改為縱向的排版:

- 由上至下的語法: `flex-direction: column;`

```
.container {
  display: flex;
  flex-direction: column; // 上至下
  width: 500px;
  background: #004466;
  margin: 0 auto;
  padding: 20px;
}
```

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

- 由下至上的語法: `flex-direction: column-reverse;`

```
.container {
  display: flex;
  flex-direction: column-reverse; // 下至上
  width: 500px;
  background: #004466;
  margin: 0 auto;
  padding: 20px;
}
```

###### tags: `CSS-FLEX`