设 flex-grow: 1 并不能保证等宽，必须先确保父容器设了 display: flex 或 inline-flex；其次需统一设 flex-basis: 0（或 0%）配合 flex-grow: 1，避免内容宽度干扰；IE11 需显式写 flex-basis: 0%。
flex-grow 设为 1 就能等宽？别急，先看容器有没有设 display: flex
很多情况下子元素没等宽，根本不是 flex-grow 的问题，而是父容器压根没进 Flex 模式。CSS 不会自动把普通块级容器变成 Flex 容器，必须显式声明。
- 父容器必须有
display: flex或display: inline-flex，否则所有flex-相关属性都无效 - 如果父容器是 Grid、Block 或其他布局模式，
flex-grow完全不生效，控制台也不会报错——这是最常被忽略的“静默失败” - 注意检查是否被其他样式覆盖，比如某个重置 CSS 里写了
display: block !important
为什么设了 flex-grow: 1 还是不等宽？可能卡在 flex-basis
flex-grow 决定的是“剩余空间怎么分”，不是“总宽度怎么分”。它和 flex-basis（即主轴上的初始尺寸）强绑定。默认 flex-basis 是 auto，也就是按内容宽度算起——这时候即使都设 flex-grow: 1，内容多的项依然更宽。
- 要真正等宽，推荐统一设
flex-basis: 0，再配合flex-grow: 1，这样所有子项从“零宽度起点”开始均分剩余空间 - 简写形式直接用
flex: 1，它等价于flex: 1 1 0%（即flex-grow: 1,flex-shrink: 1,flex-basis: 0%） - 避免混用
width和flex-basis：如果同时设了width: 200px和flex-basis: auto，浏览器会以width为准，flex-grow只在超出部分起作用
IE11 下 flex: 1 表现异常？得补 flex-basis: 0%
IE11 对 flex 简写的支持有 bug，尤其在 flex: 1 时容易忽略 flex-basis，导致子项仍按内容宽度伸缩，而非等分。
- 兼容 IE11 必须显式写出
flex-basis: 0%，不能只靠flex: 1 - 稳妥写法：
flex: 1 1 0%或分开写三行：flex-grow: 1+flex-shrink: 1+flex-basis: 0% - 注意百分比单位：IE11 要求写
0%，写0（无单位）可能触发回退行为
等宽但换行错乱？检查 flex-wrap 和容器宽度
等宽排列在响应式场景下容易因容器太窄导致子项换行，而换行后每行子项数变少，视觉上就“不等宽”了——其实是每行内部等宽，但行与行之间列数不同。
- 如果目标是单行强制等宽，加
flex-wrap: nowrap并确保父容器足够宽（或设min-width） - 如果允许换行，但希望每行都填满，就得配合
justify-content: space-between或 JS 计算列数，纯 CSS 无法保证跨行等宽 - 移动端常见坑：父容器用了
width: 100vw，但滚动条占位导致实际可用宽度小于预期，子项被挤换行
真正难的不是写对 flex-grow，而是判断当前布局中哪些约束条件正在悄悄覆盖它——flex-basis、width、min-width、容器 display 类型、甚至外部滚动条宽度，都可能成为那个“看不见的干扰项”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
