flex布局中flex-grow和flex-shrink的计算方法

时间：2023-03-30 23:04:41 CSS

CSS中的Flex（弹性布局）可以灵活的控制网页的布局，其中三个属性决定了Flex布局中item的宽/高：flex-basis,flex-grow,flex-shrink.flex-basis　　flex-basis决定了item在主轴上占据多少空间，除非设置了box-sizing，否则就是设置内容框的大小，所以当您指定一个flex在调整项目大小时需要格外小心，因为它可能包含填充和边框。　　你可以为它指定一个具体的CSS大小值，也可以指定它占父元素的百分比，它的默认值为auto（根据内容自动调整大小）100px

200px

10%

20%30%autoflex-growflex-grow在flex容器有剩余空间时设置（flex容器的item的大小减去所有flexitem的大小之和），它的默认值为0（不缩放即使有剩余空间）。如果所有项的flex-grow属性值都相同，则将剩余空间平分，否则，根据不同属性值定义的比例。例如主轴长度为600px，item1占50px，item2占100px，item3占150px，则剩余空间为：600px-(50px+100px+150px)=300px　　如果每个item的flex-grow属性值都一样（比如都是1），那么所有item都分配相同的剩余空间：　　-Item1:300px*(1/(1+1+1))=100像素；　　-项目2：300px*(1/(1+1+1))=100px；　　-项目3：300px*(1/(1+1+1))=100px；50px+100px100px+100px150px+100px　　假设每个item的flex-grow属性的值不都是一样的，比如item1是1，item2是2，item3是3，那么剩下的空间分配给他们是：　　-item1:300px*(1/(1+2+3))=50px;　　-项目2：300px*(2/(1+2+3))=100px；　　-项目3：300px*(3/(1+2+3))=150px；50px+50px100px+100px150px+150px　　属性值是小数怎么办？这里有两种情况：　　1。所有flex项的flex-gorw属性值之和大于1，仍按上述方式进行计算；　　2.所有flexitem的flex-gorw属性值之和小于1，根据1计算base值，比如item1为0.2，item2为0.3，item3为0.4，则分配给他们的剩余空间是：　　-item1:300px*(0.2/1)=60px;　　-item2:300px*(0.3/1)=90px;　　-第3项：300px*(0.4/1)=120px；50px+60px100px+90px150px+120px　　同理，当flex-shrink的值为小数时，有两种情况：　　1。所有flex项的flex-shrink属性值之和大于1，仍按上述方法计算；　　2.所有flexitem的flex-shrink属性值之和小于1，只收缩一部分溢出空间，比如item1为0.1，item2为0.3，item3为0.2，则总收缩空间为：　　300px*(0.1+0.3+0.2)=180px　　　　每件物品的权重计算方法不变，每件物品单独缩小：　　-第1件：180px*0.05=9像素；　　-项目2：180px*0.45=81px；　　-第3项：180px*0.50=90px；100px-9px300px-135px500px-90px　　由于只缩小了部分溢出空间，所以div中元素的总宽度实际上超过了div的宽度。　　以上就是对flex布局中flex-grow和flex-shrink的计算方法的简单介绍。本博客中的代码已经同步到Github参考资料：[1]。MDN文档https://developer.mozilla.org...[2]。MDN文档https://developer.mozilla.org...[3]。MDN文档https://developer.mozilla.org...

上一篇：前言

下一篇：前端开发文档

flex布局中flex-grow和flex-shrink的计算方法相关文章