Flex-grow / Flex-shrink / Flex-basis

Flex-grow

預設值爲 0。依照設定比例分配剩餘空間。
參考實作CodePen

1. 先設立外層container寬度600，內有三個寬高100的正方形。
   
2. 先在粉色方塊設定 flex-grow:1;。
   表示三個方塊外，剩下的300寬度，粉色方塊會分一份。
   300分一份就是300。所以粉色方塊寬度為100+300=400。
   
3. 再來綠色方塊也設定 flex-grow:1;。
   表示三個方塊外，剩下的300寬度，粉色方塊會分一份，綠色方塊也分一份。
   300分兩份為150，粉色與綠色方塊的寬度為:100+150=250。
   
4. 再來藍色方塊也設定 flex-grow:1;。
   表示三個方塊外，剩下的300寬度，粉色方塊會分一份，綠色方塊分一份，藍色方也分一份。
   300分三份為100，粉色、綠色與藍色方塊的寬度為:100+100=200。
   

Flex-shrink

預設值為1。與Flex-grow相反，空間不夠時，按比例壓縮。
1.設立外層container寬度600，內有三個寬300高100的四方形，寬度雖然超過外層，但flex-shrink的預設為1，表示大家被壓縮相同的比例。

2.若將三個盒子設定 flex-shrink 爲 0，不要有任何壓縮，則三個盒子會爆出 container ，這就是 flex 爲了預防爆版，預設值爲 1 的用意。

3.若只有粉色盒子設為預設，另外兩個盒子 flex-shrink 爲 0，則超過的寬度，僅會由粉色盒子進行壓縮。

Flex-basis

flex-basis預設值auto。它的使用跟 width 很像，優先程度高於width，會成為新的寬度。

1. 外層container寬度600，有三個寬度100的正方體。
   
2. 若將粉色盒子加上 flex-basis: 400px;，這個設定將蓋過原本粉色盒子的寬度。
   

CSS Grid RWD 小技巧

https://www.youtube.com/watch?v=vQAvjof1oe4&t=474s&ab_channel=KevinPowell

.box{
    flex: 1 1 33%;
}