flex: 1 不等分是因为它等价于 flex: 1 1 0%，但受子项固有尺寸（如图片、nowrap文本）、min-width: auto 默认约束、padding/border（未设 box-sizing: border-box）干扰；必须显式加 min-width: 0 和 box-sizing: border-box 才能可靠均分。
flex: 1 为什么有时不等分
因为 flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写，它让子项从“零宽度”开始瓜分剩余空间——但前提是没被内容或样式干扰。
常见错误现象：flex: 1 下两栏，一栏放了长 URL 或图片，另一栏被压成一条线；或者加了 padding 或 border 后第三栏掉到下一行。
- 子元素有
min-width（比如图片默认不缩小）、white-space: nowrap、或显式width，都会顶开flex: 1的计算 - 没设
box-sizing: border-box：默认content-box下，flex: 1分配的是内容区宽度，padding和border会额外加宽 - 浏览器给 flex 子项默认设了
min-width: auto，长单词或未换行链接会阻止压缩
必须加的两个修复项：min-width: 0 和 box-sizing: border-box
这两项不是“可选优化”，而是等分生效的前提条件。
-
min-width: 0覆盖浏览器默认的min-width: auto，允许 flex 项被压缩到比内容还窄（比如截断长文本或缩放图片） -
box-sizing: border-box确保padding和border不额外撑宽，所有尺寸都算在flex分配的宽度内 - 建议统一加在子项上，而不是依赖父容器重置 ——
flex容器不会继承这些属性
flex: 1 1 0 比 flex: 1 更可控
显式写出三个参数能规避旧版浏览器解析差异，也更明确表达意图。
-
flex: 1在部分 IE11 / Safari 旧版本中可能被解析为flex: 1 1 auto，导致内容宽的项拿更多空间 -
flex: 1 1 0明确声明从零起步，行为稳定，适合导航栏、色块条、表单列等需要严格填满的场景 - 如果想保留内容自然宽度（比如标签+输入框组合），才考虑
flex: 1 1 auto，但要接受视觉不等宽，且 IE11 支持不稳定
width 百分比方案现在基本不该用
写 width: 33.333% 看似简单，但实际问题多于收益。
- CSS 计算精度有限，容器宽度非 3 的整数倍时，三栏加起来可能少或多出 1px，导致换行或溢出
- 无法响应式适配：小屏下仍强行三列，文字挤成一团，必须配合
flex-wrap+ 媒体查询重写，反而更复杂 - 和
padding/margin难协调：要留间隙就得手动减去总 gap 宽度，写成width: calc((100% - 40px) / 3)，还必须确保父容器padding: 0 - 现代项目里，
grid-template-columns: repeat(3, 1fr)更直接、语义清、无兼容包袱
真正容易被忽略的点是：等分不是靠“写对一个值”就完事，而是整个链路都要对齐——父容器 display: flex 生效、子项没意外的 width 或 float、min-width: 0 和 box-sizing: border-box 缺一不可。少一个，就可能在某个机型或内容下突然失守。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
