flex: 1 实现均分需满足三条件：flex-basis: 0 与 min-width: 0 清除起点干扰，父容器主轴尺寸明确可计算，间隙用 gap 而非 margin。
flex: 1 不是“平均分配宽度”的指令，而是“从 flex-basis 起点出发，按比例瓜分剩余空间”。只要起点不一致、剩余空间为 0 或不可计算，就必然不均等。
flex-basis: auto 是默认陷阱
写 flex: 1 等价于 flex: 1 1 auto，第三个值 auto 表示：浏览器先按子元素内容宽度（或 width、min-width）占位，再把“剩下的”按 flex-grow 分。一个含长 URL 的 <div> 和一个空 <code><div> 同时设 <code>flex: 1，前者起点宽，自然更宽。
真正均分必须显式切断这个默认行为：
-
flex: 1 1 0（推荐，比flex-basis: 0更完整，同时确保flex-shrink不被意外重置） - 避免用
flex-basis: 0%—— 它在含图片或长文本时仍可能被min-content拉高 - 别依赖旧写法如
flex: 1在 IE 中的兼容行为，现代项目应统一用三值写法
min-width: auto 在暗中卡住布局
图片、<input>、<textarea></textarea>、<iframe></iframe> 等替换元素默认带 min-width: auto，哪怕写了 flex: 1 1 0，它也会强制撑到内容最小宽度，让 flex-grow 失效。
必须单独加：
-
min-width: 0（只加在需要自适应的子项上，按钮/开关类控件加了会变形） - 若内容需截断，配合
overflow: hidden+text-overflow: ellipsis+white-space: nowrap - 不要全局重置
min-width，否则破坏语义和交互
父容器尺寸不可计算，flex-grow 就是空转
flex-grow 不是魔法，它需要一个明确的主轴可用空间才能工作。常见失效场景：
- 水平布局（
flex-direction: row）：父容器没设width、max-width，或被float/position: absolute干扰 → 查 DevTools 的 Computed → width，确认是不是你预期的值 - 垂直布局（
flex-direction: column）：父容器高度未约束 → 必须设min-height: 100dvh（不用100vh，iOS 软键盘会缩 viewport）或逐层设height: 100% - 微信小程序里，父容器必须显式写
height，不能靠flex-grow推导
gap、box-sizing、padding 这些不是“锦上添花”，是必选项
它们直接影响 flex 分配逻辑是否成立：
-
gap是唯一不影响 flex 计算的间隙方案；用margin加间隙会导致最后一项多出空白，或触发异常flex-shrink -
box-sizing: border-box决定浏览器按什么范围分配空间 —— 若没设，flex-basis: 0分的是 content 宽度，加上 padding/border 就超容 - 子项
padding不一致？那即使flex值相同，视觉宽度也不同，因为 flex 不管 padding 占的空间
真正让 flex: 1 均分的难点不在语法，而在清理所有隐性干扰：起点要拉平（flex-basis: 0 + min-width: 0），空间要可算（父容器尺寸明确），链条要通（中间每层都设 display: flex），间隙要合规（gap 替代 margin）。少一个环节，就可能在生产环境里突然错位。
