---
# System prepended metadata

title: DAY7 - FLEX 換行效果 / flex-wrap
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / FLEX 篇']

---

# DAY7 - FLEX 換行效果 / flex-wrap

### Default / nowrap

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


[參考本範例](https://codepen.io/rrpaqjcq/pen/RwBWMMO)

- 此範例，**container** 容器寬度為: `600px`
  內部元件 **items**寬度為: `100px`
  且有6個等分。
  
### 若我再增加一個小 items 或是數個呢? 會超出範圍嗎？

```
// 我刻意再增加了五個寵物選單:

<ul class="menu">
  <li><a href="#">首頁</a></li>
  <li><a href="#">悍將</a></li>
  <li><a href="#">政治</a></li>
  <li><a href="#">娛樂</a></li>
  <li><a href="#">運動</a></li>
  <li><a href="#">財經</a></li>
  <li><a href="#">寵物</a></li>
  <li><a href="#">寵物</a></li>
  <li><a href="#">寵物</a></li>
  <li><a href="#">寵物</a></li>
  <li><a href="#">寵物</a></li>
  <li><a href="#">寵物</a></li>
</ul>
```
- 有趣的事，排版並沒有超出到下一行，根據 flex 的特性，所有的元件，若沒有設定自己的寬度情況，會等比例縮放在容器內。

- 而這個效果就是 `flex-wrap` 的預設效果: `nowrap`

```
.container {
    flex-wrap: nowrap;
}
```

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

### 屬性改成 wrap，超出的範圍會自動向下排序:

```
.container {
    flex-wrap: wrap;
}
```

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

- 這項功能未來可以應用在更多的開發用途上，像是: RWD 手機版介面。
  



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

