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

### Default / nowrap


[參考本範例](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;
}


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

.container {
    flex-wrap: wrap;
}


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

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