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

### 預設的主軸流向：
- 在設定 container display: flex 以後
儘管我們不去設定 row 這個值，由於default
就是這個設定，前面介紹的 items 也是**由左至右去排版**:


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

// 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>


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

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


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

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

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

.container {
      flex-direction: row-reverse;
}

- 可以看見，由 123排序改變成了321的流向。



### 上至下排版 - column

.container {
    flex-direction: column;
}

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



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

  flex-direction: column-reverse;



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

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