---
# System prepended metadata

title: DAY7 - FLEX 交錯軸的對齊方式 / align-items
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / FLEX 篇']

---

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

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

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

  在以下的圖片，我們預設的容器效果如下列程式碼所示:
  
```
.container {
    display: flex;
}

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

```  
- 故主軸會由左至右，以 row 的主軸來呈現。
  ![](https://i.imgur.com/xjDzwZO.jpg)


---

### row 下的交錯軸:

- 類似數學的 x.y 軸概念，主軸在哪，反之交錯軸就在哪兒。
  
```
主軸的方向性為何，要先以 justify-content 的位置而定。
```  

![](https://i.imgur.com/kTr0NJr.jpg)

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

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

![](https://i.imgur.com/N1ehYXa.jpg)

### 建置範例:

[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; */
}
```

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

### align-items: center

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

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

### align-items: flex-start

```
.container {
    flex-direction: row;
    align-items: flex-start;
}
```
![](https://i.imgur.com/EKtENDW.png)

### align-items: flex-end

```
.container {
    flex-direction: row;
    align-items: flex-end;
}
```
![](https://i.imgur.com/o0vI4zN.png)


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

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