---
# System prepended metadata

title: FLEX 筆記1. - 外層屬性 (container) 上篇
tags: [CSS-FLEX]

---

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

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

---

- 生成 .item 

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

畫面會變成:

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


- `.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 **並排**:

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

由此可知，要讓容器具有 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>
```   

畫面如下:

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

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

   來看看效果:
   
```
.item {
  width: 200px; // 從 100px → 200px
  background: #00ffa2;
  font-size: 36px;
  text-align: center;
  margin: 10px;
}
```
   很神奇的是，這樣也是可以完整的包覆在 .container 裏頭
   
   ![](https://i.imgur.com/Kiaj2gr.png)
   
   我們可以隨意調整看看其寬度，假設設定成 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>
```

畫面:

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

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

Codepen 練習:

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

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