本文介绍了CSS flex布局中权重划分的概念，旨在提高布局效率。flex允许通过扩展因子按比例分配父元素的剩余空间，避免手动设置每个子元素的尺寸。注意，使用flex后，子元素的宽度设置将失效。文中通过代码示例和截图对比了flex-grow和flex在分配空间上的差异，展示了不同权重下子元素的实际宽度变化。
flex官方给的解释是根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间，简而言之就是为了给子元素划分大小分配父级元素的剩余空间。父级元素的宽高可能会发生变化，总不能每次为了让子元素分配父元素空间，去手动设置每个子元素的宽高值吧，那就效率太低了。直接使用权重划分的话，那就效率高得多。注：使用了flex之后，原本给子元素设置的宽度！宽度！宽度！将失效。上代码and截图，自行体会吧。
注：flex和flex-grow虽然都是分配剩余空间，但是的分配计算方式有所不同，flex分配相对要标准一点。
比如：现在给一个父级元素宽度都为700px的盒子来用两种不同的方式进行分配
1、flex-grow
第一个子元素：100px
第二个子元素：flex-grow:1，审查元素看到为233.34px
第三个子元素：flex-grow:2，审查元素看到为366.66px
2、flex<
最低0.47元/天 解锁文章
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
