關(guān)于flex屬性，你應(yīng)該看過很多講解這樣的介紹：
這是“flex-grow”、“flex-shrink”和“flex-basis”三個屬性的縮寫。其中第二個和第三個參數(shù)（flex-shrink、flex-basis）是可選參數(shù)。默認(rèn)值為“0 1 auto”。
{flex: 1 1 auto;}
那么當(dāng)這三個屬性寫在一起時，到底是怎么運作的呢，我將在這里引用一個例子來跟大家分享一下，理解不到位的地方還望各位大神多多引導(dǎo)指正，不勝感激！
這是來自于網(wǎng)絡(luò)的一個例子（點擊跳轉(zhuǎn)的源網(wǎng)頁））此處引用并附上源代碼：
flex: 1 1 auto;
該語句使得子元素在父容器中被平均分配，此時他們的均寬應(yīng)該是116.67px.
下面我們來看一下，在瀏覽器中的效果：
我們可以看到，當(dāng)對父容器中的div進行hover操作的時候，整個彈性布局中的元素均發(fā)生了變化。
源代碼中hover操作的時候，父容器中的三個不同顏色的子元素div的寬度變?yōu)?00px
.flex > div:hover
{
? ? width: 200px;
}
那么在實際變化過程中，它的寬度真的變?yōu)?00px了嗎？來驗證一下！
我們可以看到在實際的hover過程中，被hover的元素寬度變?yōu)榱?30px。這是為什么呢？
flex: 1 1 auto;
這行代碼起到了關(guān)鍵作用，我們初步理解一下它在該案例中的作用。
一、子元素不溢出的情況
1.flex: 1 1 auto;中的第一個“1”所起到的作用
屬性中第一個“1”，代表的是flex-grow屬性，定義項目的放大比例，即如果存在剩余空間，他們將對剩余空間進行平均分配，故即便開始在代碼中設(shè)置了子元素的基礎(chǔ)寬度【width:30px;】，他們?nèi)匀徊皇茉搶傩钥刂茖⒏溉萜魍耆紳M。
父容器width:350px;
三個子元素的基礎(chǔ)寬度:width：30px;
剩余空間：350px-(30px+30px+30px)=260px;
平均分配剩余空間：260px/3=86.67px;
每個子元素加上平均分配的空間以后width均發(fā)生改變，為width：30px+86.67px=116.67px;
因此每一個子元素在父容器中所占大小均為116.67px.
2.flex:1 1 auto;中的第二個“1”所起到的作用
屬性中的第二個“1”代表flex-shrink，屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。若空間足則不起作用。
hover事件觸發(fā)以后子元素的寬度將發(fā)生改變，如下圖：
此處我們可以看到子元素并未將父容器撐滿，有一部分多出來的剩余空間，那么第二個“1”，即flex-shrink將不起作用，不會對元素進行收縮，但是第一個“1”即flex-grow屬性將再次發(fā)揮作用，對剩余空間進行平均分配
平均每份為90px/3=30px；
那么此時三個div的寬度將分別變?yōu)?30px、60px、60px。
此時得到的就是最終hover的尺寸，大家可以進行驗證。
二、子元素溢出的情況
為了驗證該算法的正確性，我們將源代碼中子元素的基礎(chǔ)寬度width改為100px，
1.flex:1 1 auto;中的第一個“1”所起到的作用
與上述子元素不溢出父級容器的情況相類似
三個子元素分別為width：100px;
剩余空間：350px－(100px+100px+100px)=50px;
平均分配剩余空間：50px/3=16.67px;
每個子元素加上平均分配的空間以后width均發(fā)生改變，為width：100px+16.67px=116.67px;
2.flex:1 1 auto;中的第二個“1”所起到的作用
屬性中的第二個“1”代表flex-shrink，屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。若空間足則不起作用。
我們可以看到此時子元素的總寬度為200px+100px+100px=400px>父級容器寬度350px，那么第二個“1”將開始發(fā)揮作用，即等比例收縮。
? ? ? ? ? ? shrink的計算方法與grow不同：
? ? ? ? ? ? 逐個計算：shrink比例 = flex-shrink * item-size / item總和;
? ? ? ? ? ? 溢出寬度=flex-shrink * item-size的總和-父容器的總和；
? ? ? ? ? ? 逐個計算：最終寬度=item的寬度-shrink比例*溢出寬度；
具體計算過程：
shrink比例：
? ? ? ? ? ? ? ? ? 第一個div：1*200/400=0.5；
? ? ? ? ? ? ? ? ?第二個及第三個div：1*100/400=0.25；
溢出寬度：400-350=50px;
那么每個子元素的縮小比例為：
? ? ? ? ? ? ? ? ? ?第一個div的width為:200px-0.5*50=175px;
? ? ? ? ? ? ? ? ? ?第二個及第三個div的width為:100px-0.25*50=87.5px;
綜上所述，無論是grow還是shrink其實都與其相關(guān)的伸縮比例有著莫大的聯(lián)系。
好了基本計算就是這么個思路，大家可以拿去進行驗證，講解不到位的地方還望各位多多包涵！
