flex屬性 是 flex-grow、flex-shrink、flex-basis三個屬性的縮寫。
推薦使用此簡寫屬性，而不是單獨寫這三個屬性。
flex-grow：定義項目的的放大比例；
- 默認為0，即 即使存在剩余空間，也不會放大；
- 所有項目的flex-grow為1：等分剩余空間（自動放大占位）；
- flex-grow為n的項目，占據的空間（放大的比例）是flex-grow為1的n倍。
flex-shrink：定義項目的縮小比例；
- 默認為1，即 如果空間不足，該項目將縮小；
- 所有項目的flex-shrink為1：當空間不足時，縮小的比例相同；
- flex-shrink為0：空間不足時，該項目不會縮小；
- flex-shrink為n的項目，空間不足時縮小的比例是flex-shrink為1的n倍。
flex-basis： 定義在分配多余空間之前，項目占據的主軸空間（main size），瀏覽器根據此屬性計算主軸是否有多余空間，
- 默認值為auto，即 項目原本大小；
- 設置后項目將占據固定空間。
所以flex屬性的默認值為：0 1 auto （不放大會縮小）
flex為none：0 0 auto （不放大也不縮小）
flex為auto：1 1 auto （放大且縮小）
flex為一個非負數字n：該數字為flex-grow的值，
flex：n；= flex-grow：n；
flex-shrink：1；
flex-basis：0%；
flex為兩個非負數字n1，n2： 分別為flex-grow和flex-shrink的值，
flex：n1 n2; = flex-grow：n1；
flex-shrink：n2；
flex-basis：0%；
flex為一個長度或百分比L：視為flex-basis的值，
flex: L; = flex-grow：1；
flex-shrink：1；
flex-basis：L；
flex為一個非負數字n和一個長度或百分比L：分別為flex-grow和flex-basis的值，
flex：n L；= flex-grow：n；
flex-shrink：1；
flex-basis：L;
可以發現，flex-grow和flex-shrink在flex屬性中不規定值則為1，flex-basis為0%。
到這里我已經解決我的問題啦，flex：1即為flex-grow：1，經常用作自適應布局，將父容器的display：flex，側邊欄大小固定后，將內容區flex：1，內容區則會自動放大占滿剩余空間。