最近在寫專案的時候用了一個新的css屬性flex,這個屬性之前測試過了,可以用,而且看了他的相容性,直接上圖(2017-08-07)
就這個相容性,已經可以滿足大部分的主流瀏覽器了,更何況我是微信開發,近似可以看做是android Browser的相容性,那麼就這麼看,已經十分滿足我的需求了
但是,問題來了我在使用flex-grow的屬性時,發現這個屬性十分怪異,按照一般的部落格或是介紹上來看,簡單地可以理解為是按照flex-grow的數值分配父元素剩餘空間,但是究竟是怎麼計算的,都沒有十分明確的說明,找了半天終於在知乎上找到了,經過一番測試,發現確實如此,我把經過測試之後的結論精簡地寫出來,如果要看原文的話,點選下方的連結就可以直達啊:
測試程式碼:

<div class="a">
    <div class="b p">B</div>
    <div class="c p">C</div>
    <div class="d p">D</div>
 </div>

基本樣式程式碼:

.a {
        display: flex;
        background-color: wheat;
   }

.b {
        flex-grow: 2;
   }

.c {
        flex-grow: 1;
   }
 


.d {
        flex-grow: 4;
   }

flex-grow重點說明落在 剩餘 這兩個字上,父元素剩餘的空間,那什麼算父元素剩餘空間呢,簡單的理解就是(父元素的寬度-子元素總和的寬度),這裡有兩種情況:
(1)子元素沒有設定寬度:那麼整個父元素的寬度就是剩餘寬度,這個時候flex-grow可以正常的發揮作用,但是在這種情況下的效果是一個偽分配,因為子元素沒有設定寬度,那麼子元素的寬度是自適應的,flex-grow起到的作用更像是min-width的作用,一旦子元素a的內容超過這個分配的空間,那麼就會重新計算剩餘空間,剩餘空間=(父元素的寬度-子元素a的寬度),這個剩餘寬度就會交給剩下的子元素進行分配,如果剩下的又發生以上的情況,計算依舊.如果直接設定width:100%,那麼當前的子元素寬度總和已經超過父元素寬度,那麼此時此刻,flex-grow就無效了,因為沒有剩餘空間了,你分配個毛線啊,於是,在這個時刻,就按照(子元素/子元素寬度總和)

.a div{
    width:0;
}

給每一個div設定一個width:0;然後進行分配flex-grow,這個時候加上去的寬度就是實實在在的width.
flex-shrink的計算方式在下面的連結也有講述,原理類似於以上所講
知乎上的flex-grow計算方式