前言

曾經有一段瞎摸索的時間，老是不知道為什麼flex時靈時不靈
歪著腦袋想不通為什麼...

直到摸清楚觀念之後發現不是flex不靈，是我的腦袋沒開竅呀!!!

今日主題：

flex設定了寬卻沒有用!?

實驗情境：
父層設定

  width: 600px;
  height: 600px;
  background-color: #ccc;

  display:flex;

情況1

對方塊進行不同寬度的設定~
設定width:180x，180px * 3 = 540 (< 父層600px)
設定width:200x，200px * 3 = 600 (= 父層600px)
設定width:220x，220px * 3 = 660 (> 父層600px)
到這時應該會想說~第三個會自己排下去變成第二列(*´∀‵) ~ ♥

嘿!但事實是↓↓↓↓↓↓

咦? 寬度被無視了? 每一個方塊寬度維持在了200px!?

再多加兩個寬220px的方塊下去...

咦? 我的寬220px沒有用了!!!
flex不靈啦啦啦啦啦啦啦啦!!

(敲!)莫急莫慌莫害怕

因為flex預設是"不換行"的!

沒有幫父層加入 flex-wrap:wrap; 的情況下
它會幫內部的物件平均分配寬度，所以寬度的設定就沒有效果了
加入flex-wrap:wrap;之後寬度就可以顯現出來囉!

懶得計算尺寸，那就交給flex-grow吧!

這時候有個問題，假如今天

1. 需要RWD縮放→ 父層寬度需要用 % 來設定(也就是在縮放過程中不好抓實際寬度，絕對單位難以使用)
2. 裡面的物件數量不固定
3. 物件"總"寬度有可能小於父層寬度
4. 必須填滿父層寬度

如圖所示：

反射思考就是把 寬度/物件數量 去設定物件寬度

比如
第一張圖有5欄，寬度設定 width:20% (100/5)
第二張圖有4欄，寬度設定 width:25% (100/4)

有幾個選單就要分開設定幾次...

呀~好麻煩呀!萬一哪天物件有多有少又要改

這時候可以用flex-grow: 1 意思是物件會分配"1份"的剩餘空間

在物件的共用class上設定後就可以一次改完囉~

不管它1個2個3個4個5個都放馬過來吧

結論

flex 有毒! 吸起來好過癮