flex-grow设为1但子元素未等宽，因默认flex-basis为auto，需显式设为0；flex-basis:0比0%更稳定；配合min-width可防过度压缩；含固定宽子元素时，flex-grow仅分配剩余空间。
flex-grow 设为 1 但子元素没等宽？检查 flex-basis 是否为 auto
默认情况下 flex-basis 是 auto，此时 flex-grow 会基于元素自身内容宽度（content size）进行拉伸，而不是容器剩余空间。结果就是文字多的项更宽，看起来完全不“自适应”。
要让所有子元素平分容器宽度，必须显式设置 flex-basis 为 0：
.container {
display: flex;
}
.item {
flex-grow: 1;
flex-basis: 0; /* 关键：清空固有宽度基准 */
}这样 flex-grow 才会纯粹按比例分配剩余空间，忽略原始内容宽度。
flex-basis: 0 和 flex-basis: 0% 有区别吗？优先用 0
两者在绝大多数场景下表现一致，但存在细微差异：
立即学习“前端免费学习笔记（深入）”；
-
flex-basis: 0是长度值，明确表示“无基础尺寸”，浏览器直接跳过内容测量 -
flex-basis: 0%是百分比值，需先计算父容器宽度再求 0%，某些旧版 Flex 实现（如 Safari 9-10）可能触发意外重排或测量逻辑 - 当父容器宽度未定义（比如
width: auto且无约束）时，0%可能被解析为auto，导致行为回退
实操建议统一用 flex-basis: 0，更稳定、语义更清晰。
需要保留最小宽度又想自适应？用 min-width + flex-basis: 0
纯 flex-grow: 1; flex-basis: 0 会让子元素在窄屏下无限压缩，文字可能折行甚至溢出。这时应叠加 min-width：
.item {
flex-grow: 1;
flex-basis: 0;
min-width: 120px; /* 至少保持 120px 宽度 */
white-space: nowrap; /* 防止文字意外折行影响布局 */
overflow: hidden;
text-overflow: ellipsis;
}注意：min-width 不会影响 flex 分配逻辑，它只在最终渲染阶段起作用——即先按 flex 规则算出宽度，再和 min-width 比较取较大值。
flex-grow 不是万能的：遇到固定宽子元素要小心
如果容器中混有设置了明确宽度（如 width: 200px）或 flex: 0 0 200px 的子元素，其他 flex-grow: 1 项只会瓜分「剩余空间」，而非整个容器宽度。
常见错误场景：
- 导航栏里一个 logo 固定宽，其余菜单项想均分剩余区域 → 正确
- 误以为所有项都会“等宽”，结果发现 logo 占了 200px，剩下 5 个项平分剩下的宽度 → 符合预期，但容易误解
- 混用
flex: 1和width: 100px且未设flex-shrink: 0→ 小屏下固定宽项可能被压缩，破坏布局
关键判断点：只要有一个子元素脱离 flex 自适应流（通过 width / flex-basis 非 0 / flex-shrink: 0 等），整个分配基准就变了，不能再默认“所有项等宽”。
