flex: 1 子元素宽度不均主因是内容撑开、父容器无宽、flex-basis被width覆盖或gap与margin混用；解决需加min-width: 0、设父容器明确宽度、避免width与flex混用、统一box-sizing: border-box并优先用gap。
flex: 1 子元素宽度不均，先看内容是否撑开
不是 flex 计算错了，而是子元素里有长文本、white-space: nowrap、内联元素或不可折行内容（比如长 URL、连续无空格字符串），导致其 min-content size 远大于平均值，强行“锁死”最小宽度。此时即使都写了 flex: 1，浏览器也会优先满足内容可读性，放弃均分。
解决办法很直接：
-
min-width: 0加到每个子元素上——这是最常用且有效的兜底项 - 配合
overflow: hidden或text-overflow: ellipsis处理溢出文本 - 避免在子元素里用
white-space: nowrap，除非你明确需要它
父容器没设 width，flex 分配就失去参照
Flex 布局中，子元素的 flex-basis（哪怕是 0%）仍需一个“可用空间”来计算。如果父容器本身宽度未定义（比如 display: flex 的祖先没设 width，或处于 position: absolute 且未限定尺寸），子元素可能按内容宽度收缩，而非均分。
检查并确保：
立即学习“前端免费学习笔记（深入）”；
- 父容器有明确宽度：如
width: 100%、max-width: 600px或固定值 - 没有被
float、position: absolute或display: contents破坏盒流 - 如果父容器是
body或html，确认它们没被重置为width: auto且无约束
误写 width 后又加 flex: 1，等于白写
flex: 1 是 flex: 1 1 0% 的简写，其中 flex-basis: 0% 会完全覆盖你写的 width: 200px。这不是 bug，是规范行为。
想让某个子元素固定宽、其余均分？别混用：
- 固定宽项写
flex: 0 0 200px（不能只写width） - 自适应项写
flex: 1，且不要给它设width - 媒体查询中改宽度时，同步改
flex-basis，比如@media (max-width: 768px) { .item { flex-basis: 100%; } }
gap 和 margin 混用导致视觉错觉
用 gap 设置子项间距是最干净的方式；若用 margin-right 或 margin-left，容易因外边距合并、最后一项多出空白，让人误以为“没均分”。
更隐蔽的问题是：当子元素含 border 或 padding，而你没设 box-sizing: border-box，实际占用宽度会超出 flex 分配值，造成挤压。
建议统一加：
-
box-sizing: border-box到所有 flex 子元素 - 用
gap替代margin控制间距（IE 不支持时再降级） - 避免在 flex 子元素上同时设
padding和width，尤其在响应式断点中
min-width: 0 没加、flex-basis 被 width 干扰、或者内容本身拒绝压缩——这些细节一旦漏掉，布局就会在某个设备或数据下突然崩掉。 
