---
# System prepended metadata

title: DAY6 - FLEX 的外層屬性 II
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / FLEX 篇']

---

# DAY6 - FLEX 的外層屬性 II

### 建置基本容器 container 與元件 items:

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

// css

.container {
  width: 500px;
  margin: 0 auto;
  background: #004466;
}

.items {
  font-size: 36px;
  text-align: center;
  background: #00ffa2; 
}
```

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



### 個別元件設定寬高，觀察元件變化:

- 替內部元件1~3，額外設定個別 class:

```
<div class="container">
  <div class="items item1">1</div>
  <div class="items item2">2</div>
  <div class="items item3">3</div>
</div>
```
```
.item1 {
  width: 150px;
  height: 150px;
}

.item2 {
  height: 200px;
}

.item3 {
  width: 400px;
}
```
- 其狀況如下：


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

- 為了方便檢視，我們針對 `.item` 向下推 10px 區隔:

```
.items {
    margin-bottom: 10px;
}
```

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

### 這些元素都會另外起一行，原因是什麼?

- 主要是，因為這裡面的元素，皆為區塊元素 - `block;`

  所以看到1.2.3 items 都是佔據一行的狀態。
  

### item1:

- 這邊設定了:

```
width: 150px;
height: 150px;
```
- 故在寬高上，就是根據使用者撰寫去做變化。

### item2:

- 設定了高度 200px
  但**寬度在沒有設定的情況下，自適應了父元素的寬度**: 500px
  **形成了滿版的狀態。**

```
height: 200px;
```
### item3:
- 沒設定高度，但因為寬度有設定，所以400px 正常
  高度的部分，主要是元素本身的'3'所推擠出來的。
```
width: 400px;
```  

### flex 並排狀態:

```
.container{
    display: flex;
}
```

```
// 設定推擠，讓元素更明顯：
.items {
    margin-left: 10px;
    margin-right: 10px;
}
```
![](https://i.imgur.com/LJuRQhj.png)


- 探討：我們知道 .item2，本身已經有寬度:500px，相當於整個 container，但我們可以發現並排後，這些元件的加總寬度，竟然是沒有超過 container。

- 其原因，當容器設定成 flex，內元件的寬度，會因為外容器的寬度設定，讓其內部元件自適應且均分其寬度設定。

---


### 1. .item3與2 元件等高的原因？

- A: 

```
// 因為 .item2 有設定了高度 200px。
   而3 並沒有設定高度，所以.item3 會因為 .item2 而自適應齊高。
   
//  .item1 沒有同高是因為自己本身有設定了:150px 的高度。  
```

##### 簡單來說，在這個 container 裡面，所有的元件，會根據最高的那一個，使其他的元件向最高的那位看齊。

### 拿掉 .item1 的高度試試看:

- 這邊就看到三個都同等高度了(向 .item2 看齊。)

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


### 拿掉 .item2 的高度是是看:
- 基本上，也只剩元素內的文字大小推高度了，所以三個元件高度是一樣的。
![](https://i.imgur.com/Hije6tY.png)


[myCodePenExp](https://codepen.io/rrpaqjcq/pen/QWBjOdj?editors=1100)



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