flex: 1 不均分主因是子元素固有尺寸干扰及父容器宽度未定义；需设父容器宽度、子元素 min-width: 0，并避免 width/flex-basis 覆盖，或改用 flex: 0 1 33.333% 等显式基准值。
flex: 1 在子元素上为什么有时不均分？
直接给每个子元素写 flex: 1 看似合理，但实际可能不等宽——常见原因是父容器没设 width 或存在内容溢出、min-width 干扰。Flex 默认会尊重子元素的固有尺寸（比如文字撑开的宽度），flex: 1 只是“剩余空间分配权”，不是“强制等分指令”。
实操建议：
- 确保父容器有明确宽度（如
width: 100%或固定值） - 子元素加
min-width: 0，防止内容（尤其长单词/URL）撑破等分逻辑 - 避免子元素本身设置
width、max-width或flex-basis覆盖flex: 1
用 flex: 0 1 0% 实现严格等分
当需要完全忽略子元素原始尺寸、纯按列数切分时，更可靠的是显式控制 flex-basis。例如 3 列等分：flex: 0 1 33.333%；4 列就用 flex: 0 1 25%。
这种写法中：flex-grow: 0 关闭伸展，flex-shrink: 1 允许压缩，flex-basis: X% 定义基准宽度。百分比基于父容器计算，天然支持响应式。
立即学习“前端免费学习笔记（深入）”；
注意点：
-
flex-basis用百分比时，父容器必须有可计算的宽度（不能是fit-content） - 小数精度问题：CSS 不支持
calc(100% / 3)直接写进flex-basis，需手动算好（如33.333%）或用 CSS 自定义属性 +calc()配合flex-basis
配合 justify-content: space-between 的陷阱
有人想用 justify-content: space-between 加固定子元素宽度来“模拟”等分，但这本质不是等分——首尾元素贴边，中间间隙相等，子元素自身宽度仍需手动设，且列数变动时要同步改所有宽度。
真正等分场景下，应避免混用：
-
justify-content用于主轴对齐，和“子元素宽度均分”无关 - 若同时设了
justify-content: space-between和flex: 1，反而可能因浏览器渲染顺序导致宽度计算异常 - 需要间隔时，优先用
gap（现代浏览器支持良好），它不影响 flex 分配逻辑
IE11 下 flex: 1 均分失效怎么办？
IE11 对 flex: 1 解析有 bug：当子元素含块级内容（如 div、p）时，可能拒绝收缩，导致宽度不均。这不是写法错，是引擎限制。
兼容方案：
- 子元素统一加
flex: 1 1 0（即flex-basis: 0），比flex: 1更明确 - 必要时降级为
display: table+table-layout: fixed，用width: 25%硬控 - 如果项目已放弃 IE11，可放心用
flex: 1+min-width: 0组合，这是目前最简洁可靠的均分方式
min-width: 0 这一行。它不改变布局意图，却能挡住 80% 的“看起来写了 flex:1 却不等宽”问题。 
