flex: 1 实际是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，即从 0% 起步拉伸分配剩余空间，但受 min-width: auto、white-space: nowrap、父容器无宽及 width 与 flex-basis 冲突等影响而失效。
flex: 1 不是“均分”，而是“从 0% 起步拉伸”
写 flex: 1 并不等于“把父容器宽度切成等份”，它实际展开为 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。关键在 flex-basis: 0% —— 浏览器会先让所有子项“假装宽度为 0”，再一起瓜分剩余空间。但这个“假装”很容易被现实打断。
常见干扰包括：
- 图片、
、等替换元素自带min-width: auto，内容多宽，起点就多宽，flex-basis: 0%直接失效 -
white-space: nowrap或长 URL/代码块无法折行，浏览器必须保内容可读，拒绝压缩 - 父容器没设明确宽度（比如
display: inline-flex且无width），根本没“剩余空间”可分
为什么加了 width 还是无效
width 和 flex-basis 冲突时，flex-basis 优先级更高。写 .item { width: 200px; flex: 1; }，width 完全被忽略 —— 不是 bug，是 CSS 计算阶段直接跳过它。
真正可控的写法是三值语法：
-
flex: 0 0 200px→ 固定宽，不伸缩 -
flex: 1 1 0→ 拉伸分配，但需配合min-width: 0 - 避免混用：
flex-basis和width同时存在，行为不可靠
button 上 flex: 1 失效的典型原因
在 Chrome/Firefox 中默认有 min-width: min-content，文字一长就撑开，一短就被压扁。哪怕你写了 flex: 1，它也只在“内容宽度”基础上拉伸或收缩。
实操必须做三件事：
- 写
flex: 1 0 0（关掉flex-shrink，防止压缩） - 加
min-width: 0（Chrome/Firefox 必须；iOS Safari 建议改用min-width: 1px） - 显式声明
box-sizing: border-box（不同浏览器对 button 的默认解析不一致）
gap、box-sizing、min-width: 0 缺一不可
只写 flex: 1 是不够的。这三项不是“锦上添花”，是让 flex: 1 正常工作的底层前提：
-
gap：唯一不影响 flex 分配逻辑的间隙方案；用margin会导致最后一项多出空白或异常压缩 -
box-sizing: border-box：确保padding和border被包含在 flex 分配的宽度内，否则计算偏差明显 -
min-width: 0：切断min-width: auto的隐式兜底，尤其对图片、iframe、button 等替换元素
漏掉任意一项，都可能让三个 flex: 1 元素在视觉上宽窄不一，哪怕它们代码完全一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
