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