hello，我是Wayne，一个普通编程爱好者。致力于用大白话记录我所掌握的小知识。
前言
从前，为了将多个元素整齐划一的放在一排，想必大家都用过table、float等去进行布局。但是用了float以后，又往往需要设置一个clear:both去清除浮动。后来有许多样式库，推出了他们的“栅格系统”，用col-lg-xxx、col-md-xxx等方式帮大家简化了这些操作。而css3就有这么一个弹性盒子的属性，叫flex，能更好的实现响应式布局。今天说说flex-grow、flex-shrink这两个属性。
flex-grow
简单的说，就是当flex容器中的元素没有填满整个容器，系统会根据flex-grow所设置的比例将剩余空间进行分配。 举个栗子：
<style>
.flex-box {
display: flex;
width: 300px;
}
.flex-box div {
background-color: red;
color: #fff;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.flex-box .a {
background-color: green;
}
</style>
<div class="flex-box">
<div class="a">a</div>
<div class="b">b</div>
</div>
以上，我们创建了一个宽度为300px的div，包裹了两个宽度为100px的div，将a设为绿色，b设为红色，具体是这样：
但是你会发现，a、b两个div其实没有把整体占满.接下来我们在a中加入flex-grow:1
<style>
.flex-box .a {
flex-grow:1;
background-color: green;
}
</style>
这个时候，300px就被填满了
原因是因为系统将没被填满的100px的空间，按照1份的比例分给了a。
如果还是还是有点模糊，那我们把b也设置一个flex-grow:1。先来算算看，将会得到什么？
- a、b分别都设置了flex-grow:1；
- 就是需要把剩余未被分配的100px空间分为2份，1份给a，1份给b；
- 所以结果应该是a宽为150px，b也是150px。
效果确实如此。这回你明白了吗？可以多去试试看。
flex-shrink
有扩大自然就有压缩咯。当内部元素宽度的和比总宽度要大时，且我们不想元素换行，那么内部元素会根据比率进行压缩。flex-shrink的计算会比flex-grow复杂一些。举个栗子：
<style>
.flex-box {
display: flex;
width: 300px;
}
.flex-box div {
background-color: red;
color: #fff;
height: 100px;
text-align: center;
line-height: 100px;
}
.flex-box .a {
width: 300px;
flex-shrink: 1;
background-color: green;
}
.flex-box .b {
width: 100px;
flex-shrink: 2;
}
</style>
<div class="flex-box">
<div class="a">a</div>
<div class="b">b</div>
</div>
还是熟悉的配方，我们从代码层面能看到，a+b的宽度和要比总宽度300px还要多出100px，那这100px是需要被a、b两个div分别压缩消化掉的。最终效果如下：
a最终是240px，而b是60px，这是怎么计算的呢？
首先我们知道a的权重是1（flex-shrink设为1，或不设置默认为1），b的权重是2，它们的加权综合所得是：a宽度*a权重+b宽度*b权重，用(宽度*权重)/加权综合所得可得出压缩比率，将比率和需消化宽度相乘进而求出最终需要压缩的宽度。也就是：
- 加权综合所得：300*1+100*2=500；
- a所需压缩宽度：((300*1)/500)*100=60；
- b所需压缩宽度：((100*2)/500)*100=40；
- 最终a宽度为：300-60=240px，b宽度为：100-40=60px；
- 如果，权重为0，即需要压缩的宽度为0，也能解释为什么当flex-shrink设置为0时，该元素宽度不会进行压缩保持原样。这里我就不演示啦。
ok，今天就记录到这吧。有不准确的地方欢迎大佬们批评指正，互相学习哦，非常感谢:)。
