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