# DAY7 - FLEX 交錯軸的對齊方式 / align-items

### 主軸、交錯軸的關係：

- 在此，先複習一次主軸的觀念是什麼:

在以下的圖片，我們預設的容器效果如下列程式碼所示:

.container {
    display: flex;
}

// 預設效果: flex-direction: row;

- 故主軸會由左至右，以 row 的主軸來呈現。

---

### row 下的交錯軸:

- 類似數學的 x.y 軸概念，主軸在哪，反之交錯軸就在哪兒。

主軸的方向性為何，要先以 justify-content 的位置而定。


// 控制主軸的流向是 justify-content
// 控制交錯軸的流向是 align-items

### 交錯軸 - align-items 有哪幾種對齊方式?


### 建置範例:

[codepen 連結](https://codepen.io/rrpaqjcq/pen/VwBvJRR)

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

.container {
  display: flex;
  padding: 10px;
  margin: 0 auto;
  width: 500px;
  height: 500px;
  background: #004466;
  border: 5px solid #00ffa2;
}

.items {
  line-height: 3;
  text-align: center;
  margin: 10px;
  height: 50px;
  width: 100px;
  background: #00ffa2;
/*   border: 5px solid white; */
}


### align-items: center

.container {
    flex-direction: row;
    align-items: center;
}


### align-items: flex-start

.container {
    flex-direction: row;
    align-items: flex-start;
}


### align-items: flex-end

.container {
    flex-direction: row;
    align-items: flex-end;
}


- [更多的配置方式，參考六角學院模擬器。](https://codepen.io/peiqun/pen/WYzzYX)

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