flex:1与flex-grow:1最简单的区别与计算

  • Post author:
  • Post category:其他


一、flex的宽度计算方式是容器剩余空间+

具有flex属性

的元素自身尺寸:

例如在一个width:400px的容器中,有a、b、c 三个width:100px的元素,给a元素flex:2的属性,给b元素flex:1的属性,不给c元素。

计算宽度是:剩余空间(400px-300px):100px + 参与flex项目尺寸200px=300px 再按3份的比例给a2份,b1份。


最后:a:width:200px ; b:width:100px ; c:width:100px

二、flex:grow的宽度计算方式只是容器剩余空间:

还是在一个width:400px的容器中,有a、b、c 三个width:100px的元素,给a元素flex-grow:2的属性,给b元素flex-grow:1的属性,不给c元素。

计算宽度是:剩余空间(400px-300px):100px

剩余100px再按3份比例给a2份+


自身本身尺寸


,b1份+


自身本身尺寸





最后:a:width:166.7px ; b:width:133.3px ; c:width:100px

三、如果一个容器中的所有项目都给了flex或flex-grow属性,那么在计算中没有差别。两者最大的差别就在于flex的宽度是具有flex属性(即参与项目)尺寸再加上剩余空间。再除以份数剩以比例。

再举2个例子:

1、 在一个width:300px的容器中,有a、b、c 三个width:100px的元素,给a元素flex:3的属性,给b元素flex:2的属性,不给c元素。

计算宽度是:剩余空间0 + 参与flex项目尺寸200px=200px 再按5份的比例给a3份(200除以5剩以3),b2份。


最后:a:width:120px ; b:width:80px ; c:width:100px

2、 在一个width:300px的容器中,有a、b、c 三个width:100px的元素,给a元素flex-grow:3的属性,给b元素flex-grow:2的属性,不给c元素。

计算宽度是:剩余空间0 项目没有可分配的空间,尺度不会发生变化。


最后:a:width:100px ; b:width:100px ; c:width:100px

                                                                                  are U get?



版权声明:本文为weixin_49684995原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。