# FLEX 筆記6. - flex-wrap 換行屬性

- [範例網址](https://codepen.io/rrpaqjcq/pen/xxpVoQY)

- 預設屬性:

當我們在 container 上賦予 `display: flex;`

預設的 flex-wrap 屬性則是: `nowrap;`

- flex 為何需要換行的屬性?

因為 flex，會根據內含的原件來自適應延伸其**高**、**寬**

故選單我們若無限增加項目的話，清單就永遠擴張則不會換行:

<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>
</ul>

// CSS 我們設定容器寬度是: 600px
   但是，我們一個項目的寬度: 100px 這個清單次數恐怕早已要換行了
.menu {
  width: 600px;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  margin: 0 auto;
}

.menu li {
  text-align: center;
}

.menu li a{
  text-decoration: none;
  background: #00ffa2;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  width: 110px;
  border: 1px solid black;
}

.menu li a:hover {
  transition: 1s;
  color: #00ffa2;
  background: blue;
}

- 此時只需要 `flex-wrap: wrap;` 則超出的清單就會換行了

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