flex官方给的解释是根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间,简而言之就是为了给子元素划分大小分配父级元素的剩余空间。父级元素的宽高可能会发生变化,总不能每次为了让子元素分配父元素空间,去手动设置每个子元素的宽高值吧,那就效率太低了。直接使用权重划分的话,那就效率高得多。注:使用了flex之后,原本给子元素设置的宽度!宽度!宽度!将失效。上代码and截图,自行体会吧。
注:flex和flex-grow虽然都是分配剩余空间,但是的分配计算方式有所不同,flex分配相对要标准一点。
比如:现在给一个父级元素宽度都为700px的盒子来用两种不同的方式进行分配
1、flex-grow
第一个子元素:100px
第二个子元素:flex-grow:1,审查元素看到为233.34px
第三个子元素:flex-grow:2,审查元素看到为366.66px
2、flex<