flex: 1 不是“均分”而是“拉伸”，因其等价于 flex: 1 1 0%，即从 0% 起步瓜分剩余空间，但受内容最小宽度、white-space: nowrap、min-width: auto 等干扰导致实际不等宽；设 flex-basis: 0 并配合 min-width: 0、box-sizing: border-box 和 gap 才能真正等宽。
flex: 1 为什么不是“均分”而是“拉伸”
因为 flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写，它的本意不是“把容器切成三等份”，而是“每个子项从 0% 宽度起步，再按权重瓜分剩余空间”。但这个“从 0% 起步”会被很多隐式条件打断。
常见错误现象：flex: 1 下两栏，一栏是短文本，另一栏塞了长 URL 或未换行的代码块，结果后者明显更宽；或者加了 padding 后第三栏掉行。
- 子项自带
width、min-width（比如图片默认min-width: auto）会覆盖flex-basis: 0% - 内容不可折行（
white-space: nowrap）时，浏览器必须保证内容可读，于是放弃压缩 -
flex-basis: auto（某些旧写法或继承场景）会让元素先按内容宽度占位，再分配剩余空间——这就不是“均分”，而是“内容宽的多拿一点”
为什么 flex-basis: 0 能强制均分
设 flex-basis: 0（或 flex: 1 1 0）等于告诉浏览器：“别管它内容多宽，初始主轴尺寸就是 0，所有项站到同一起跑线，再一起分剩余空间”。这是真正实现视觉等宽的底层控制点。
使用场景：导航菜单项、卡片内图标+文字区、表单左右列（标签+输入框）等需要严格对齐的布局。
- 推荐写法：
flex: 1 1 0（比单独写flex-basis: 0更完整，避免flex-shrink被意外重置） - 必须配合清除干扰：
min-width: 0（尤其对图片、input、iframe等替换元素） - 若内容仍溢出，加
overflow: hidden或text-overflow: ellipsis配合white-space: nowrap
box-sizing 和 gap 不是可选项，是必做项
box-sizing: border-box 不只是“让 padding 不撑宽”，它直接决定 flex: 1 分配的是“含边框和内边距的总宽”，否则浏览器按 content-box 计算，flex-basis: 0 分完后再加上 padding 和 border，就必然超容或换行。
gap 也不是“为了好看”，它是唯一不影响 flex 分配逻辑的间隙方案。用 margin 加间隙会导致最后一项多出空白、或因 flex-shrink 行为异常被额外压缩。
- 所有 flex 子项统一加：
box-sizing: border-box - 间隙统一用：
gap: 8px（现代项目放心用，Safari 14.1+ 已全支持） - 若需兼容老 Safari（margin-right +
:last-child { margin-right: 0 }，但必须确保flex-basis: 0已生效，否则 margin 会参与 flex 计算
flex: 1 1 auto 和 flex: 1 1 0 的实际区别在哪
区别全在第三个参数：flex-basis。一个是“按内容宽度起步”，一个是“从 0 起步”。这决定了第一轮空间分配前的初始占位，直接影响最终视觉效果。
例如两个并排项，都设 flex: 1：
-
flex: 1 1 auto→ 先按“Hello”和“Very long label here”各自内容宽度占位，再平分剩余空间 → 后者更宽 -
flex: 1 1 0→ 先都压到 0 宽，再平分全部容器宽度 → 严格等宽（前提是没其他 min-width 干扰）
IE11 对 auto 支持不稳定，生产环境建议统一用 0；而 0 在所有现代浏览器中行为一致，也更容易预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
