flex：1學習筆記

Flexbox,終於可以承認自己明白了
阮一峰Flex教程
flex詳解
flex是flex-grow flex-shrink flex-basis 三個值的縮寫

flex-grow：屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。 (指定當前項如何擴充套件)

flex-shrink:屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。(指定當前項如何收縮)

flex-basis:屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。(指定分配剩餘空間之前當前項的初始大小)

當 flex 取值為一個非負數字，則該數字為 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%：
{flex:1}即為：{ flex-grow:1; flex-shrink:1; flex-basis:0%}

flex的預設值為：{flex:0 1 auto ;}

ps:
後續補充一個demo來加深對flex的理解