---
# System prepended metadata

title: DAY6 - FLEX 主軸的概念 / flex-direction
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / FLEX 篇']

---

# DAY6 - FLEX 主軸的概念 / flex-direction

### 預設的主軸流向：
- 在設定 container display: flex 以後
  儘管我們不去設定 row 這個值，由於default
  就是這個設定，前面介紹的 items 也是**由左至右去排版**:
  
 
![](https://i.imgur.com/k6QDa9u.jpg)


### 基本的樣式環境建立：

```
// HTML:

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

```
// CSS:

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

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

### 第一個 flex-direction 屬性: row(default):

- 主軸是預設由「左置右」，當你設定 `display: flex` 時，即完成。

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


```
.container {
    // 預設: row
    display: flex
}
```


### 設定主軸，排版由右至左 - row-reverse

- 主軸的設定，要寫在 container:

```
.container {
      flex-direction: row-reverse;
}
```
- 可以看見，由 123排序改變成了321的流向。

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


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


### 上至下排版 - column

```
.container {
    flex-direction: column;
}

.items {
    // 增加辨識性
    margin-bottom: 10px;
}
```

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

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


### 縱向，相反的排列，由下至上 - column-reverse

```
  flex-direction: column-reverse;
```
![](https://i.imgur.com/EKSuAD7.png)

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

- [myCodePen](https://codepen.io/rrpaqjcq/pen/yLqYpxx?editors=1100)

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / FLEX 篇`