对flex-grow和flex-shrink的深入理解

flex弹性布局，如果子元素宽度之和大于或者小于父元素宽度，空间就会存在剩余和不够，flex默认不换行，除非设置flex-wrap,那么这种情况下，有两个重要的属性，flex-grow和flex-shrink.

flex-grow默认值为0，用于子元素的宽度之和小于父元素的宽度时分配剩余空间，假如父元素宽度为1000，三个子元素，div1宽度200，div2宽度300，div3宽度300；三个子元素都不设置flex-grow,那么浏览器默认不自动分配剩余空间，剩余空间超出；假如给div1设置flex-grow:1,那么剩余1000-200-300-300=200px全部分配给div1；其他的子元素div2和div3不参与分配,即不设置此属性就不参与分配。

所以如果要参与分配，就要给子元素添加flex-grow属性。如果按照1:1:1，那么剩余空间就分成3等份，每个子元素分1/3，也可以设置2:2:2或者3:3:3,，但是结果和1:1:1是一样的，都是平均分配，没有意义。如果按照2:3:1，那么剩余空间分成6等份，每个子元素按照2/6，3/6,1/6去分配。

flex-shrink和flex-grow相反，默认值为1，子元素宽度之和超出父元素宽度，那么每个子元素就要按比例缩小以适应父元素。这时候给子元素设置flex-grow不起作用。即使不给子元素设置flex-shrink,浏览器也会根据子元素在子元素宽度之和的占有比例去缩小每个子元素，假如

父元素宽度600，div1宽度200，div2宽度300，div3宽度300，超出父元素200+300+300-600=200，这200在默认情况下浏览器会按比例给每个子元素均分减少，默认比例怎么算呢？先算出每个div占所有div宽度之和多少，上面三个div之和为800，那么三个div所占比例为：

div1:200/800=0.25

div2:300/800=0.375

div3:300/800=0.375

那么超出的200就按照上面这个比例去分配，所有div1宽度要减少200*0.25=50,div2减少200*0.375=75，div3减少200*0.375=75；所以即使不给子元素添加flex-shrink,浏览器最后会把三个子元素宽度缩小到150,225,225；如果想自定义减小某个子元素宽度，就要给相应的div设置flex-shrink, 其他不缩小的设置flex-shrink：0；

 

转载于:https://www.cnblogs.com/5-clay/p/10826801.html