flex寬度相關的屬性有三個 flex-grow，flex-shrink，flex-basis。下面分別介紹其相關特點：
flex-grow 擴大因子，主軸有剩餘空間時，元素分配到剩餘空間的比率
flex-shrink 收縮因子，主軸剩餘空間為負時，元素分配到剩餘空間的比率
flex-basis：設定元素初始大小，若未設定，則水平排列預設為元素的寬度，垂直排列預設為元素的高度
當flex-basis為0時，例如(flex:1)，此時item的寬度不受width的影響
當flex-basis為auto時，item的寬度隨著width的變化增大或縮小
flex是flex-grow，flex-shrink，flex-basis的簡寫，簡稱GSB
flex的寫法與三個屬性的對照表
flex: none => flex: 0 0 auto;
flex: auto => flex: 1 1 auto;
flex: 0 => flex: 0 1 0%;
flex: 1 => flex: 1 1 0%;
flex: 0 auto => flex: 0 1 auto;(預設值)
flex: 0 1 => flex: 0 1 0%;