# FLEX 筆記2. - 外層屬性 (container) 下篇

- 延續上篇，也順便藉此複習 Flex 的特性:

1. 建立一個外部容器 `.container`、及3個 `.item`
建立基本的環境，並寫入一些外觀 - CSS

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

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

.item {
  background: red;
  color: #ffffff;
  text-align: center;
  font-size: 36px;
}


---

2. 接下來就藉由各種調整來測試 container 以及內部 item 之間的變化:

- 在原本的三個 div - item，再分別建立三個個別的屬性- **class**

<div class="container">  
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

  // 在 div上 同時寫多個屬性是前端必須要懂得技術!
  //  .item 通常做為共用屬性 , 分別帶入 1/2/3 , 則可以自行調配

- 再來就是分別寫入三個 item 的不同變化來觀察:

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

.item {
  margin-bottom: 10px;  
  background: red;
  color: #ffffff;
  text-align: center;
  font-size: 36px;
}

// 新增的部分:

.item1 {
  width: 150px;
  height: 150px;
}

.item2 {
  height: 200px;
}

.item3 {
  width: 400px;
}


- 這邊我可以得到上面的情況，我們依序來探討原因是為什麼?

1. item1 - 雖然有寫入高度，但因為**區塊元素的特性**，故會自動佔滿一 整行，使下一個元素產生在下一行

2. item2 - 沒有寫入寬度，**會自動適應** .container - 500px

3. item3 - 寫入寬度，但沒有寫死高度，**高度則是由文字**所帶出來的

---
3. 測試 Flex:

- 在 `.container` 加入 flex 屬性

.container {
   // add flex 
  display: flex;
  background: green;
  width: 500px;
  margin: 0 auto;
}

此時可以看到我們容器裡頭的 item 都呈現並排了

- → 其方向性


- 將 .item 左右區隔些:

.item {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  background: red;
  color: #ffffff;
  text-align: center;
  font-size: 36px;
}


display: flex;

其目的是可以使容器內的所有元件做到並排(→)，並且可以各自去平均分配寬度，以達到整齊在容器內的效果

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