子项宽度不均匀的根源在于flex-basis默认为auto，导致分配剩余空间前的初始尺寸受内容影响；设flex-basis:0配合flex-grow才能实现真正等宽。
子项宽度不均匀，通常不是“出错了”，而是 flex-grow 和 flex-basis 没有按预期配合使用。默认情况下，flex-basis: auto 会先按内容宽度（或设置的 width）分配空间，再用 flex-grow 去“分剩余空间”——如果内容长度差异大，视觉上就显得宽窄不一。
明确 flex-basis 的作用起点
flex-basis 是分配剩余空间前的“初始尺寸”。它不是最终宽度，但决定了每个子项在“分蛋糕前各自占多大一块底座”。
- 设为
flex-basis: 0（常配合flex-grow: 1），表示“不预留内容宽度，所有空间均等分配” → 宽度真正均匀 - 设为
flex-basis: 200px，则每个子项先占 200px，再把剩余空间按 grow 值比例分 - 设为
flex-basis: auto（默认），会尊重子项自身的 width 或内容撑开的宽度，导致起点不同 → 宽度易不均
用 flex-grow 配合 flex-basis 实现等宽/按比缩放
常见需求是“4个子项平均占满容器”，正确写法不是只写 flex: 1，而是：
-
flex: 1 1 0;→ 等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0;（推荐） -
flex: 1;→ 默认是flex: 1 1 0px？错！其实是flex: 1 1 auto，仍受内容影响 - 若想 2:1:1 分配，可设：
item1 { flex: 2 1 0; } item2, item3 { flex: 1 1 0; }
检查是否被其他样式干扰
即使 flex 设置正确，也可能被这些“隐形因素”破坏均匀性：
立即学习“前端免费学习笔记（深入）”；
- 子项内部有
white-space: nowrap+ 长文本 → 强制不换行，撑宽自身 - 设置了
min-width或width（尤其固定像素值），会限制 flex 调整范围 - 父容器没设
width或被浮动/绝对定位影响，导致可用空间不确定 - 子项含
margin、padding或边框，视觉宽度 ≠ flex 计算宽度（建议用box-sizing: border-box）
基本上就这些。核心就一条：想要均匀，flex-basis 设为 0，再靠 flex-grow 控制占比，别依赖内容宽度做起点。