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


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

- 替內部元件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;
}

- 其狀況如下：


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

.items {
    margin-bottom: 10px;
}


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

- 主要是，因為這裡面的元素，皆為區塊元素 - `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;
}


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

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

---

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

- A:

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

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

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

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


### 拿掉 .item2 的高度是是看:
- 基本上，也只剩元素內的文字大小推高度了，所以三個元件高度是一樣的。

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

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