flex: 1 不是平均分配，而是从 flex-basis 起步拉伸；flex: 1 1 0 才能实现真正等宽，需配合 box-sizing: border-box、gap、min-width: 0 等配置，并确保父容器有明确宽度。
flex: 1 不是“平均分配”，而是“从 flex-basis 起步拉伸”
写 flex: 1 等价于 flex: 1 1 auto，第三个值 flex-basis: auto 表示：浏览器先按子项内容宽度（或已设的 width、min-width）占位，再把剩余空间按 flex-grow 分配。内容多的项起点宽，自然分得更多——这不是 bug，是规范行为。
常见错误现象：
- 两栏都写
flex: 1，一栏是“登录”，另一栏是超长 URL，后者明显更宽甚至溢出 - 三列卡片，其中一张含未约束的
<img>，整行换行或宽度失衡 - 开发者工具里看到子项 computed width 差距大，但代码看起来完全一样
真正等宽必须显式设 flex-basis: 0
flex: 1 1 0 才是让所有子项从「0 宽度」起步、再均分剩余空间的可靠写法。注意是 0，不是 0%，避免旧引擎解析歧义。
实操建议：
- 用三值语法替代单值：
flex: 1 1 0（比只写flex-basis: 0更完整，防止flex-shrink被意外重置） - 对图片、
<input>、<textarea></textarea>等替换元素，额外加min-width: 0，否则它们自带的min-width: auto会卡住不收缩 - 若内容仍溢出，配合
white-space: nowrap+overflow: hidden或text-overflow: ellipsis
box-sizing 和 gap 不是可选项，是必做项
box-sizing: border-box 决定 flex 分配的是“含 padding 和 border 的总宽”。若用默认 content-box，flex-basis: 0 分完后还要加 padding 和 border，极易超容或换行。
gap 是唯一不影响 flex 分配逻辑的间隙方案。用 margin 加间隙会导致最后一项多出空白，或因 flex-shrink 行为异常被额外压缩。
必须做的配置：
- 父容器加
display: flex和gap: Xpx - 所有子项统一设
box-sizing: border-box - 避免给子项同时设
width和flex: 1—— 后者会直接忽略前者
父容器没宽度，flex: 1 就是空转
flex: 1 分的是“剩余空间”，如果父容器宽度未明确（比如是 inline-flex、浮动、绝对定位、或未设 width / max-width），就根本没有“剩余”可分。
检查方式：打开开发者工具 → Computed → 查看父容器的 width 值。若显示 auto 或极小数值，flex: 1 就只能从 0% 起步，分无可分。
修复建议：
- 给父容器加
width: 100%（尤其inline-flex场景） - 避免用
width: 100vw（滚动条宽度变化会导致抖动） - 响应式断点中改布局时，同步更新父容器约束，不能只调子项
min-width: auto、white-space: nowrap 下的长单词、content-box 盒模型、还有父容器那点模糊的宽度边界。每漏掉一个，flex: 1 1 0 就会失效一次。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
