# 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;
}


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

在 .container，加入 display: flex;

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

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

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


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

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


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;
}


於是就倒過來了:)

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

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

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


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

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

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