只写 flex-grow: 1 无法稳定实现等分，必须配合 flex-basis: 0（即用 flex: 1 1 0），否则内容宽度会干扰分配逻辑，尤其在移动端或 safari 中大概率失效。
直接给结论：只写 flex-grow: 1 无法稳定实现等分，必须配合 flex-basis: 0（即用 flex: 1 1 0）——否则内容宽度会干扰分配逻辑，尤其在移动端或 Safari 中大概率失效。
为什么 flex-grow: 1 单独用经常不等宽
因为 flex-grow 分配的是「主轴剩余空间」，而这个“剩余” = 容器总宽 − 所有子项的 flex-basis（默认是 auto，即按内容宽度计算）。如果两个子元素内容长度不同，它们的初始 flex-basis 就不同，剩余空间可能为负或极小，flex-grow 根本没机会起作用。
- 常见现象：
flex-grow: 1下左侧窄、右侧宽；小屏上溢出、换行失败；iOS Safari 里完全不响应 - 根本原因：浏览器先按内容撑开子项，再算“剩余”，不是从零开始均分
- 解决方案：强制把起点设为 0，让分配真正从空白开始
正确写法：用 flex: 1 1 0 替代 flex-grow: 1
flex: 1 1 0 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写，它确保所有子项从 0 宽度起步，再按权重瓜分全部可用空间。
- 两列等宽：
.col { flex: 1 1 0; } - 三列等宽：同样给每个子项设
flex: 1 1 0，无需额外计算 - 不等比（如 2:1）：
.left { flex: 2 1 0; }+.right { flex: 1 1 0; } - 注意：
flex-basis: 0比flex-basis: 0%更可靠，后者在部分旧 Android WebView 中解析异常
固定列 + 自适应列时别混用 width 和 flex-grow
想让一列固定、另一列自适应？别给固定列写 width: 200px，那只是“提示”，Flex 引擎仍可能压缩它。正确做法是：
- 固定列：
flex: 0 0 200px（不放大、不缩小、基准就是 200px） - 自适应列：
flex: 1 1 0（填满所有剩余空间） - 错误组合：
width: 200px+flex-grow: 1→ CSS 会优先按 width 算基础尺寸，flex-grow分配被压制 - 兼容性补丁：iOS Safari 有时对空 flex 容器渲染异常，父容器加
min-height: 1px可防塌缩
防文字溢出和极端压缩的兜底控制
即使用了 flex: 1 1 0，长文本或图片仍可能导致子项被过度拉伸或压缩变形。这时需叠加渲染层约束：
- 防无限压缩：
min-width: 120px（不影响 flex 分配，只限制最终渲染下限） - 防文字撑破：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 防换行失效：避免在子项上同时设
width和flex，冲突会导致flex-grow被忽略 - IE11 兼容：需额外加
-ms-flex: 1，否则中间栏可能塌缩为 0
真正起效的关键从来不是 flex-grow 数值本身，而是你有没有切断内容宽度对分配起点的干扰。几乎所有“不生效”的案例，都卡在 flex-basis 没显式归零这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
