为什么这个flex布局中 前2个flex子元素没有分配到剩余空间？-灵析社区

PX_13

abdfdofewefdfdsdfewfwefdf 务开发时遇到的，为了便于清晰描述，我这里写了一个能复现上述问d题的简化 .container { display: flex; flex-wrap: wrap; width: 420px; border: 1px green solid; } .item { flex: 1; border: 1px blue dotted; } img[src*="nature"] { width: 100px; } ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/00247d58a8806c08dbab8d9eb1833ca1.png) 问题： flex:1 等价于 flex: 1 1 0%, 既然flex-basis是0%，那么flex子元素 应该优先使用最小内容宽度吧，第一个子元素的最小内容宽度就是 文本 `abdfdofewefdfdsdfewfwefdf`的宽度， 第二个flex子元素的最小内容宽度就是图片本身的宽度100px， 第三个flex子元素的最小内容宽度 应该是单个中文字符的宽度吧？ 所以剩余空间=flex容器宽度-三个flex子元素的最小内容宽度 然后把这个剩余空间等比例分配给每一个子元素， 所以我理解中的 渲染效果应该是类似下图： ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/bf99637dfd92c00f58310cbe603b1736.png) 每一个绿色框框都是一个flex子元素 红色框框部分是 该flex子元素 分配到的 剩余空间。 然而实际渲染的结果 看起来好像剩余空间 都给了第三个flex子元素，请问我的理解错在了哪里？

阅读量：176

点赞量：0

问AI
如果 flex-basis 明确设置了,那么剩余空间的大小就是容器的大小减去每一个元素的 flex-basis 大小。如果 flex-basis 没有明确设置,那么会从元素的 width, max-width, max-content 等属性中确定元素的 flex-basis 大小。 这里的每一个元素的 flex-basis 都为 0%,因此剩余空间的大小就是容器的宽度大小减去元素的边框大小。由于每一个元素的的 flex-grow 都是 1,那么每一个元素分配的大小就是 (420 - 3 x 2) / 3 = 138。由于第一个元素其首选最小宽度大于 138,当分配的大小小于该大小时取首选最小宽度,因此第一个元素会占据大约 218.48(可能会因为浏览器的默认使用字体不同有所变化,包括了边框大小)。这会导致剩余空间的大小重新计算,因此剩余两个元素的分配大小变为 (420 -218.48 - 2 x 2) / 2 = 98.76。同样的原因会导致第二个元素取其首选最小宽度,也就是 100,如果包括边框,那么第二个元素的大小就占据 102。这样最后一个元素分配的大小变为 420 - 218.48 - 102 - 1 x 2 = 97.52,如果加上边框就是 99.52。 简单来说就是最小内容宽度不是用来确定剩余空间的,而是用来约束最终元素的大小的。如果希望让计算更加直观,最好把子元素的边框删除,这样计算起来简单一点。