這篇文章帶大家深入了解CSS Flex佈置的三個屬性：flex-grow、flex-shrink、flex-basis，希望對大家有幫助！
在我們日常開發中， flex佈局可以說是家常便飯，對於很多的我們來說（你懂得^_^），可能我們用的比較多的應該就是垂直居中里，也就是下面這段代碼：
.flex-box{
display: flex;
justify-content: center;
align-items: center;
}寫的非常好（^_^）！然後我們都知道這個是定義在父元素的，佈局效果是在子元素生效的！對吧！但是我們有沒有想過這樣的問題呢？
我們先不管這兩個問題是怎麼樣，又是怎麼解決的！我們先來了解一下flex-grow、flex-shrink、flex-basis這三個元素是個啥，又是怎麼用，下面我們一起來學習學習！
擴大，用來分配父元素剩餘空間的相對比例。預設值為0。我們先看一個例子：/* 父元素 */
.flex-box{
display: flex;
width: 300px;
height: 300px;
margin:0 auto;
background-color: #000;
}
/* 子元素left */
.left{
flex-grow: 1;
width: 100px;
background-color: orange;
}
/* 子元素right */
.right{
flex-grow: 0;
width:100px;
background-color: cyan;
}上面我們可以看出子元素left和right的寬度總和為200px，而父元素寬度為300px，也就是說父元素還有空餘空間，而真正的效果如圖所示。
我們會發現子元素left的寬度會變成200px，這就是flex-grow的作用了，flex-grow為0不做處理，而left盒子的flex-grow為1。也就是剩餘寬度空間全部分配給了left盒子，假如flex-grow屬性變成這樣呢？
/* 子元素left */
.left{
...
flex-grow: 3;
...
}
/* 子元素right */
.right{
...
flex-grow: 1;
...
}這樣處理的話也就是剩餘空間按照left:right為3:1處理，多出來的空間：300px-(100px 100px)=100px；left的寬度：100px 100px*(100px*3/(100*3 100*1)) = 175px;right的寬度：100px 100px*(100px*1/(100*3 100*1) = 1125x ；這就解析了當所有子元素寬度總和小於父元素寬度總和時，子元素如何處理？這個問題了。
注意地，如果所有子元素的flex-grow的值是一樣的話，那麼剩餘空間就按照平均分配。
縮，用來指定flex元素的縮小規則。預設值為1。我們先來看一個例子：/* 父元素 */
.flex-box{
display: flex;
width: 300px;
height: 300px;
...
}
/* 子元素left */
.left{
flex-shrink: 3;
width: 200px;
background-color: orange;
}
/* 子元素right */
.right{
flex-shrink: 1;
width:200px;
background-color: cyan;
}
首先，所有子元素寬度總和大於父元素寬度（200px 200px>300px）。由於父元素的寬高都是固定的，所以不能撐大父元素，只能縮小子元素。子元素flex-shrink的比為3:1，所以子元素left的寬度為：200px-100px*(200px*3/(200px*3 200px*1)) = 125px；子元素right的寬度為：200px-100px*(200px*1/(200px*3 200px*1)) = 175px；這樣也解析了當所有子元素的寬度和大於父元素寬度和的時候，子元素是如何處理的這個問題的了。
基準，用來指定子元素內容盒尺寸大小。預設值為auto。我們先來看看下面這個例子： .flex-box{
display: flex;
width: 300px;
height: 300px;
margin:0 auto;
background-color: #000;
}
.left{
width: 200px;
flex-basis: 100px;
background-color: orange;
}
.right{
width:100px;
background-color: cyan;
}
細心地我們發現，left的寬度是不是有點奇怪？上面left不是定義了一個width:200px，為什麼效果會是100px的？我們都知道flex-basis是基準，其實在flex佈局下，這個屬性的優先順序比width要高的，當flex-basis與width都存在時，是以前者的值為準的。
好了好了，三個元素我們都學完了，總結一下：
解决父元素宽度大于所有子元素宽度之和时，子元素合理分配父元素剩余空间。值为0时，子元素盒子空间不做扩大处理。解决父元素宽度小于所有子元素宽度之和时，子元素缩小宽度以适应父元素宽度，值为0时，子元素盒子空间不做缩小处理。一个高优先级的宽度。除了上面各自分开使用这三个属性，还可以盒子一起使用也就是：
flex:flex-grow flex-shrink flex-basis; /*记忆法：g（拱）s（？）b（？）后面两个字懂了吧^_^*/
flex属性可以灵活处理这三个属性，可以单值、双值处理，这样的话，flex属性分别代表什么？
none：元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为
flex: 0 0 auto。auto：会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为
flex: 1 1 auto。initial：它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。
/*父元素*/
.flex{
display: flex;
width: 200px;
height: 100px;
margin:0 auto;
background-color: #000;
}
/*子元素*/
.left{
flex:3 2 50px;
background-color: orange;
}
/*子元素*/
.right{
flex:2 1 200px;
background-color: cyan;
}从上面我们可以看到子元素的flex值太复杂，其实我们可以先不看前面两值，先看最后一值（flex-basis）。如果所有子元素的flex-basis之和大于父元素之和考虑第一个值，如果所有子元素的flex-basis之和小于父元素之和考虑第二个值。上面所有子元素宽度50px+200px=250px大于父元素宽度200px，所以考虑第二个值也就是子元素left和子元素right的flex-shrink属性比2:1，超出部分50px这样处理left的宽度缩小为：50px-50px*(50px*2/(50px*2+200px*1)) = 33.34;right的宽度为：200px-50px*(200px*2/(50px*2+200px*1)) = 166.66。
所以上面题目答案为33.34:166.66 = 1:5
【推荐学习：web前端开发】
以上是帶你吃透Flex佈置的三個屬性：flex-grow、flex-shrink、flex-basis的詳細內容。更多資訊請關注PHP中文網其他相關文章！
