flex布局在开发中的作用：1.解决之前定位position,floatfloat,percentage%需要解决的布局问题，2.解决前面的比较难把握的垂直居中问题vertical-align面试中很容易遇到一个问题：左边200px，右边占满整个屏幕。之前的写法会用leftside写一个固定的200px，后面的元素margin-left:200px，然后加上Floating浮动，有了flex之后，写起来就很方便了。leftwidth200px.rightflex1自动填满剩余空间，不是特么6，当然这是题外话，我们需要学习的是flex:grow,flex:shrinkflex:growMDN是这样描述的：CSS属性flex-grow为弹性项目的主要尺寸设置弹性增长因子。它指定应将弹性容器中剩余空间的多少分配给项目（弹性增长因子）。这个怎么样？你明白吗？读起来头晕目眩。举个栗子吧。sectiondiv.leftdiv.centerdiv.rightsectiondisplayflexwidth600pxheight100px.leftflex-grow1width100pxbackgroundred.centerflex-grow2width200pxbackgroundyellow.rightflex-grow3width16pxbackgroundgreen上面会是什么栗子在实际操作中是什么样子的？有趣吗？宽度按特定比例拉伸。这就是我们的flex:grow的效果，当子元素的flex-grow之和大于1时，必须计算实际的宽度。先计算子元素相对于父元素的剩余宽度，这里是600-100-200-16=284计算第一个方块的实际宽度：284*1(flex-grow)/6(流量之和-grow的子元素）+100（样式定义的宽度）=147.33，第二个和第三个不妨自己尝试计算flex-grow。另一种情况是flow-grow的和小于1，这时候算法就和上面的不一样了。不同点：栗子：还是拿上面的栗子，把flow-grow的值全部改为0.n，对应.leftflex-grow0.1width100pxbackgroundred.centerflex-grow0.2width200pxbackgroundyellow.rightflex-增加0.3宽度16px背景绿色试着想想你会得到什么样的布局。看图片，我已经放在下面了。当子元素的flow-grow加起来小于1时，此时，父元素会有空间没有被占用，那么此时子元素的实际宽度是多少：当flex-子元素的grow加起来小于1，需要计算实际宽度。先计算子元素相对于父元素的剩余宽度，这里是600-100-200-16=284计算第一个方块的实际宽度：284*0.1(flex-grow)/1(流量之和-子元素的grow)+100(样式定义的宽度)=128.4，第二个和第三个不妨自己算一下。当然这个flex-grow的值是受min/max-width影响的，实际使用的时候要注意flex:shrinkCSSflex-shrink属性指定了flex元素的收缩规则。flex元素只有在默认宽度之和大于容器时才会收缩，收缩的大小取决于flex-shrink的值。另外附上MDN对flex:shrink的描述。.哈哈flex:grow是拉伸填空，那么flex:shrink则相反，会收缩，即子元素的宽度大于父元素的宽度。再举个栗子：继续使用上面的代码，但是我们要修改css。leftflex-shrink1width200px背景红色。中心flex-shrink2宽度300px背景黄色。+300+160=660，这个值已经超过了父容器的600宽度，这个时候，实际操作中会发生什么：还是拍照吧~怎么样，按一定比例缩小吧，是不是很神奇呢~flex:shrink和flex:grow的算法还是有些区别的，这里有几个需要注意的值（溢出值，总宽度）：首先计算子元素的溢出值200+300+160-600=60。然后计算子元素的总宽度，2001+3002+160*3=1280计算第一个正方形的实际宽度：200-601(flex-shrink)200(width)/1280=190.62，第二个和第三个你不妨想一想这个算法是不是有点难懂。其实总宽度就是把flex:shrink看成一个share，子元素就是每个share，每个share*share相加，这样就可以算出总宽度了。宽度;然后计算溢出值在每个子元素中的份额，然后用子元素的实际宽度减去溢出份额得到实际宽度~当然flex:shrink也有小于1的情况，想想关于它，如果shrink大于1，则刚好等于收缩后的总宽度；那么如果它小于1会怎样？来了，他来了，如果小于1，子元素不能完全缩放，还是会伸到容器外面194.38+283.12+146.5=624怎么样？虽然此时子元素还在收缩，但是还是比父容器的600大。太奇妙了。那么，此时如何计算实际宽度：先计算子元素200+300+160-600=60的溢出值和此时的溢出值已经不能直接计算了，因为总和子元素的flex-shrink不是1，只有0.6，此时的溢出值应该是60*0.6=36来计算再计算子元素的总宽度，2000.1+3000.2+160*0.3=128计算第一个正方形的实际宽度：200-360.1(flex-shrink)200(width)/128=194.38，第二个和第三个不妨自己算一下。当然，flex-shrink也会受到max/min-width的影响。这就是结局。大家可以根据自己的理解写一个demo来加深。记住，感谢码农进阶题库，每天一道面试题或者Js小知识https://www.javascriptc.com/interview-tips/??看完两件小事，如果你觉得这篇文章很对你有启发，请你帮我两个小忙：把这篇文章分享到你的朋友/交流群，让更多的人看到，一起进步，一起成长！关注公众号“IT平头哥联盟”，公众号后台回复“资源”即可免费领取我精心整理的前端进阶资源教程一个以代码改变世界为使命的平台，在这里你可以找到头条新闻技术世界的每一天
