flex: 1 不能直接等宽是因为它等价于 flex: 1 1 0%，基准尺寸为0%但受内容影响导致初始宽度不一致；需显式设 flex-basis 为 0px 或 0% 并配合 flex-grow: 1 才能真正等宽。
flex: 1 为什么不能直接让子项等宽？
很多人写 flex: 1 后发现元素宽度不一致，尤其当子项有不同默认内容宽度（比如文字长度不同）时。这是因为 flex: 1 实际是 flex: 1 1 0% 的简写，其中第三个值 0% 表示“基准尺寸为 0”，浏览器会先按内容撑开，再把剩余空间（容器宽 − 内容总宽）平均分给每个子项。如果内容本身差异大，初始宽度就不同，最终结果就不是视觉等宽。
真正实现等宽的 flex 写法
要让所有子项严格等宽，关键在于让它们的“基准尺寸”一致，且不被内容干扰。最稳妥的做法是显式设 flex-basis 为相等值（如 0 或 0px），再靠 flex-grow: 1 均分剩余空间：
.container {
display: flex;
}
.item {
flex: 1 1 0px; /* 或 flex: 1 1 0% */
}这样所有子项起始宽度都是 0，然后平分父容器全部可用宽度，自然等宽。注意：必须同时设置 flex-grow 和 flex-basis，只写 flex: 1 不够可靠。
常见踩坑点：flex-shrink 和内容溢出
即使用了 flex: 1 1 0px，如果子项内有长单词、URL 或未换行文本，仍可能撑破布局。这时需要配合以下处理：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 0—— 防止 flex 项因内部内容过长而拒绝收缩（尤其在嵌套 flex 容器中） -
word-break: break-word或overflow-wrap: break-word—— 控制长文本换行 - 避免对子项设固定
width或min-width，否则会干扰 flex 分配逻辑
和 grid 等宽方案对比要不要换？
如果只是单纯等宽，display: grid 更直观：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}但 flex 仍有优势：支持动态增删子项时自动重排、天然支持对齐（justify-content）、更易做响应式断行（flex-wrap）。选哪个取决于是否需要这些能力——别为了等宽硬切 grid，也别为了 flex 而放弃 grid 的简洁性。
真正容易被忽略的是 flex-basis 的默认行为。很多人调了半天 flex-grow，却没意识到问题出在第三参数上。
