PX_13

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

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子元素，请问我的理解错在了哪里？