# FLEX 筆記1. - 外層屬性 (container) 上篇

- 首先製作一個外部容器，取名 `.container`，包住三個 `.item`

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

- 並設置: 寬度、版型置中、背景顏色等

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


---

- 生成 .item

.item {
  width: 100px;
  background: #00ffa2;
  font-size: 36px;
  text-align: center;
}

畫面會變成:


- `.container` 下 padding，讓 `.item` 產生一點留白效果。

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

.item {
  width: 100px;
  background: #00ffa2;
  font-size: 36px;
  text-align: center;
}

- `.item` 在撰寫 margin: 10px，讓三個物件稍微隔開一些

.item {
  width: 100px;
  background: #00ffa2;
  font-size: 36px;
  text-align: center;
  margin: 10px;
}

## 開始測試 FLEX，Step.1

- **影片教學紀錄 by HexSchool** 6-44. 4:12。

- FLEX 必須要知道的相關屬性:

1. **讓容器開始具有 FLEX 的排版效果**，必要屬性: display: flex

針對 `.container` 外部容器撰寫:

.container {
  display: flex;
  // 使容器具有-flex的效果 , 這是第一步
}

根據上述新增的條件，此時畫面會使三個 item **並排**:


由此可知，要讓容器具有 Flex 的效果，第一步就是在外部容器寫下語法
`display: flex;`

---

## Step.2 在 FLEX 情況下，內部元件的特性

- 我們可以透過 `.item` 控制其寬度去觀察變化

1. 我們在 `.container`，再增加一個 `.item`
此時 `.item` 的**設定寬度**皆為: 100px

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

畫面如下:


2. 假設寬度設定成 200呢?，我們父層寬度是 500px 這樣不會超出?

來看看效果:

.item {
  width: 200px; // 從 100px → 200px
  background: #00ffa2;
  font-size: 36px;
  text-align: center;
  margin: 10px;
}

很神奇的是，這樣也是可以完整的包覆在 .container 裏頭


我們可以隨意調整看看其寬度，假設設定成 2000px
它也是不會超出**外部容器**，只要使用 flex，
內部元件(.item) 就可以自動平均去分配合適的寬度在裡面了!

---

## Step.3 FLEX 特性觀察

- 假設今天我再 .item 第二個下一段 lorem，假設4個單字好了:

<div class="container">
  <div class="item">1</div>
  <div class="item">Lorem ipsum dolor sit.</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

畫面:


可以發現到，其中一個物件的**高度**，也會跟著影響其餘物件的等高

Codepen 練習:

https://codepen.io/rrpaqjcq/pen/qBpBpNm

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