Flex子元素宽度不均的根源在于主轴尺寸分配未明确控制，需用flex-basis设基准宽度、flex-grow控剩余空间分配，并注意min-width、flex-shrink等干扰因素。
子元素宽度不均，本质是 Flex 项在主轴上的尺寸分配没被明确控制。单纯依赖 flex: 1 或默认行为，容易因内容长度、最小宽度（min-width）、盒模型差异导致视觉不齐。关键不是“压平”，而是用 flex-basis 定义基准尺寸，再靠 flex-grow 控制剩余空间如何分——两者配合才能稳定可控。
明确设置 flex-basis 作为初始宽度基准
flex-basis 决定了元素在分配剩余空间前的“起始宽度”。不设或设为 auto（默认），浏览器会先按内容撑开，再伸缩，极易造成不均。
- 想等宽排列：统一设
flex-basis: 0，再配合flex-grow: 1，强制从零开始均分剩余空间 - 想按比例分配（如 2:1:1）：分别设
flex-basis: 200px、100px、100px，再设相同flex-grow: 1，此时比例由基础宽度决定 - 避免内容挤压：若文字过长导致溢出，可加
min-width: 0配合flex-basis: 0，允许内容区域主动收缩
用 flex-grow 精细调节剩余空间占比
flex-grow 不是“放大倍数”，而是“剩余空间的分配权重”。只有当容器有剩余空间时才生效；若所有项已撑满容器，grow 值再大也无用。
- 三列等分：全部设
flex: 1 1 0（即flex-grow: 1,flex-shrink: 1,flex-basis: 0） - 主内容占 2 份，侧边栏各占 1 份：主项
flex: 2 1 0，侧边项flex: 1 1 0 - 固定宽 + 自适应宽：固定项设
flex: 0 0 200px（禁用伸缩），自适应项设flex: 1 1 0
检查干扰因素：min-width、content、shrink
即使 flex 设置合理，也可能被其他样式覆盖：
立即学习“前端免费学习笔记（深入）”；
-
min-width太大（如min-width: 200px）会阻止收缩，让flex-basis: 0失效 - 图片、输入框等替换元素自带默认
min-width: auto，需显式设min-width: 0才能正常 flex 缩放 -
flex-shrink: 0会禁止压缩，若某子项内容很长又不允许缩小，就会挤占别人空间
调试小技巧：临时加边框 + 查看 computed 样式
给子元素加 border: 1px solid red，打开开发者工具，看每个元素的 flex-basis、flex-grow、min-width 实际计算值。重点关注 “Used width” 和 “Flex base size” 是否符合预期——很多时候问题不在写法，而在浏览器实际解析后的结果。
