先了解剩餘空間
flex有剩餘空間
flex-grow
單個item設定1 佔滿
多個設定數字 按比例分配
flex-basis=0 由內容撐開
flex:basis 父元素的百分比值
如果乙個auto 另乙個生效
flex-basis優先順序高於width
flex-shrink 讓元素在行裡縮小
由於flex環境的父容器的寬度500px是不會變，所以為了是子容器的寬度和最多為父容器的寬度，
那就只有兩個辦法：第乙個是使子容器換行，第二個是壓縮子容器使之剛好撐滿父容器的寬度。
因為flex子容器是預設不換行的，所以這裡不做討論。
而第二種壓縮，實際上就是上面例子表現出來的樣式。
現在就遇到了上面第二個問題，這三個的壓縮比例是多少呢，各自需要壓縮的空間是多少呢？
這個時候就需要談談flex-shrink，這個屬性其實就是定義乙個子容器的壓縮比例。
他的預設值是1，所以上面那個例子，就是三個子容器壓縮的比例是一樣的 1:1:1。
如果此時我們設定b1的壓縮比例是2，那會怎樣呢？
剩餘空間＝父容器空間－子容器
1.flex-basis/width - 子容器2.flex-basis/width - …
2、如果父容器空間不夠，就走壓縮flex-shrink，否則走擴張flex-grow；
3、如果你不希望某個容器在任何時候都不被壓縮，那設定flex-shrink:0；
4、如果子容器的的flex-basis設定為0(width也可以，不過flex-basis更符合語義)，
那麼計算剩餘空間的時候將不會為子容器預留空間。
5、如果子容器的的flex-basis設定為auto(width也可以，不過flex-basis更符合語義)，
那麼計算剩餘空間的時候將會根據子容器內容的多少來預留空間。
content –> width –> flex-basis (limted by max|min-width)
如果沒有設定flex-basis屬性，那麼flex-basis的大小就是專案的width屬性的大小
如果沒有設定width屬性，那麼flex-basis的大小就是專案內容(content)的大小
flex 是
flex-grow、 1 佔滿剩餘空間 2也是佔滿空間 以此類推
flex-shrink、 0 任何情況都不被壓縮
flex-basis 0% 該專案本來的大小
.item
.item
flex-basis content 由內容撐開
flex-basis: 0%; 使用width
flex屬性總結
一.父元素屬性 1.display flex 定義了乙個flex容器 2.flex direction 決定主軸的方向 row 預設值，水平從左到右 colunm 垂直從上到下 row reverse 水平從右到左 column reverse 垂直從下到上 3.flex wrap 定義如何換行 n...
flex初識 一 基本屬性
flex direction屬性 決定主軸的方向 即專案的排列方向 flex wrap屬性 規定如果一條軸線排不下，如何換行 flex flow屬性 是flex direction屬性和flex wrap屬性的簡寫形式，預設值為row nowrap justify content屬性 定義了專案在主...
flex屬性總結（全）
一.父元素屬性 1.display flex 定義了乙個flex容器 2.flex direction 決定主軸的方向 row 預設值，水平從左到右 colunm 垂直從上到下 row reverse 水平從右到左 column reverse 垂直從下到上 3.flex wrap 定義如何換行 n...