CSS：FLEX GROW的簡單筆記
這幾天老頭又雄心壯志的，開始了過去因為各種可抗力不可抗力因素而中斷數次的邁向全端工程師之路(好啦其實就是懶)。反正就是買了UDEMY有空就來上上課。一門課三百多的成本說貴不貴，但也沒便宜到哪裡。應該說，有學到就是便宜，沒學到就是貴。所以不管工作再忙，也是要來為以後的生活好好打算。
OK，昨天在咖啡廳坐了半天上了第一堂，主題是要利用html + css+ js 做出前台expanding card的效果，課程中，控制cards寬度的CSS屬性是 flex-grow。是說flex自從在CSS3實裝以來，早已是設計師眼中排版的神兵利器。只是老頭在過去專案多數使用Wordpress 或是 bootstrap框架下，比如說在昨天課程中看到了flex: 1這樣的CCS語法，看起來輕鬆寫意，但我卻其實對flex的各種屬性及使用方式還是維持著一知半解的狀態。
所以剛好趁著機會研究一下，並且做點筆記提醒自己不要忘記：
- flex-grow屬性，決定 flexbox 排版的 item 如何分配剩餘的空間
- 簡單說，舉個例子，以往如果要做單/雙側欄排版時，我們必須使用百分比或 calc 來達成，現在使用 flexbox + flex-grow 就可以輕易地達成
- Flex-grow預設值為0。
- 擴展的方向由父層的flex-direction決定，若為row，擴展方向為水平(視覺上的寬度)；若為column，擴展方向為垂直(視覺上的高度)
- 擴展量的計算公式：該item的flex-grow值/ 父層下所有item flex-grow值總和 *父層容器寬度。
- 舉例來說，若container設置為row，其下面有三個item flex-grow分別為 1 ,2 ,3。則實際顯現出來的item容器寬度會是1/6(1+2+3)，2/6，3/6。假設父層容器寬度是60px，則三個item的寬度會是10px, 20px, 30px。