flex-basis: 0 是解决子元素宽度不均的强制起点，必须显式设置；默认 flex-basis: auto 会按内容宽度占位再分配剩余空间，导致文字多的项更宽，而 flex: 1 简写等价于 flex: 1 1 0%，旧 Safari 解析不稳定，应统一用无单位的 0 并配合 min-width: 0、box-sizing: border-box 及 iOS Safari 下表单控件的 min-width: 1px 处理。
flex-basis: 0 是解决宽度不均等的起点，不是可选项
所有子项都写 flex: 1 却不等宽，根本原因几乎都是 flex-basis 没被显式归零。浏览器默认用 flex-basis: auto，即先按内容宽度占位，再分剩余空间——文字多的项起点就宽，自然分得更多。
实操建议：
-
flex-basis: 0必须显式写，不能依赖flex: 1的简写（它等价于flex: 1 1 0%，旧 Safari 对0%解析不稳定） - 统一用无单位的
0，比0px或0%更可靠，尤其在 iOS Safari 和 IE11 中 - 若子项含
<img alt="如何在CSS中通过flex-basis解决子项宽度不均等的问题" >、<span></span>等内联内容，额外加min-width: 0，否则浏览器会按固有尺寸撑开
为什么加了 flex-basis: 0 还是不等宽？检查这三处干扰
即使写了 flex-basis: 0 和 flex-grow: 1，仍可能偏差——不是 Flex 失效，而是底层样式在“偷偷加宽”。
常见干扰点：
立即学习“前端免费学习笔记（深入）”；
- 子项有
padding或border，但没设box-sizing: border-box→ Flex 计算的是 content box 宽度，padding/border 额外增加总宽，视觉上溢出或挤压 - 父容器带
padding或margin→ Flex 剩余空间 = 容器 width − 父容器 padding/margin，计算基数被污染 - 子项内有
white-space: nowrap+ 长文本（如 URL、邮箱）→ 强制不换行，突破flex-basis: 0起点，需配overflow: hidden和text-overflow: ellipsis
button/input/select 在 iOS Safari 中必须单独处理
iOS Safari（尤其是 15+）对表单控件有硬编码的 min-width: min-content 保护，会无视你写的 min-width: 0，导致同为 flex: 1 1 0 的按钮宽度差异极大。
有效解法：
- 对所有参与 Flex 分配的
<button></button>、<input>、<select></select>显式设置box-sizing: border-box - 把
min-width: 0改成min-width: 1px—— 既绕过系统保护，又不影响视觉等宽 - 避免给这些元素加
white-space: nowrap，除非你同时控制了内容长度
flex: 1 1 0 不等于“锁死宽度”，收缩行为仍需确认
flex: 1 1 0 表示“可伸可缩 + 起点为 0”，但如果你不希望小屏下被压缩（比如导航栏图标区），就得关掉收缩：
- 用
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0） - 或更明确地写
flex-grow: 1; flex-shrink: 0; flex-basis: 0 - 别混用
width和flex-basis：一旦写了flex-basis，width就会被忽略
真正容易被忽略的，是 flex-basis: 0 后还要同步清理 min-width、box-sizing 和表单控件的平台特异性行为——少一个，等宽就失效。
