子元素占比不正确源于未理解flex-grow、flex-shrink与flex-basis协作逻辑；flex-basis是分配剩余空间前的初始尺寸，设为0才能使grow按比例生效；grow瓜分的是剩余空间而非总宽，shrink在溢出时按basis×shrink加权收缩；常用组合如等宽三列用flex:1 1 0。
子元素占比不正确，通常是因为没理解 flex-grow、flex-shrink 和 flex-basis 三者的协作逻辑，而不是单纯调大 grow 值就能均分。
flex-basis 是起点，不是最终宽度
flex-basis 决定元素在分配剩余空间前的“初始主轴尺寸”，它类似 width（主轴为水平时）或 height（主轴为垂直时），但优先级高于 width。如果设为 flex-basis: 0，表示“从零开始分配剩余空间”，此时 flex-grow 才真正按比例生效。
- 默认值是
auto（即内容宽度），容易导致文字多的项更宽，看似“不均分” - 想严格按 grow 比例分配，建议显式设
flex-basis: 0 - 例如：
flex: 2 1 0表示 grow=2、shrink=1、basis=0 —— 更可控
flex-grow 按比例瓜分“剩余空间”，不是总宽度
所有子项的 flex-grow 总和为 3，某项设为 2，并不等于占 2/3，而是占“剩余空间”的 2/3。如果父容器有大量空白，它会撑开；如果内容已填满甚至溢出，grow 可能完全不生效。
- 检查父容器是否设置了
width或max-width，以及是否有边距、内边距挤压可用空间 - 用浏览器开发者工具查看“Computed”中的 flex-basis 和 final size，确认是否真有剩余空间可分
- 避免同时设置
width和flex-basis，后者会覆盖前者（主轴方向）
flex-shrink 在空间不足时才起作用，且受 basis 影响
当子项总宽度超过父容器时，flex-shrink 才触发收缩。它的实际收缩量 = (自身 flex-basis × shrink) ÷ 所有项 (basis × shrink) 之和。如果某项 flex-basis 很大，即使 shrink=1，它也可能比 basis 小的项缩得更多。
立即学习“前端免费学习笔记（深入）”；
- 想让所有项等比例压缩，统一设
flex: 1 1 0（即 grow=1, shrink=1, basis=0） - 若某项禁止缩小，设
flex-shrink: 0，但要确保它内容不会溢出，否则可能撑破容器 - 慎用
flex: 0 0 auto（不伸不缩），它完全脱离弹性计算，容易破坏布局一致性
快速校准常见占比场景
不用反复试值，记住这几个实用组合：
- 等宽三列：
flex: 1 1 0（三个子项都这样设） - 6:3:1 比例：
flex: 6 1 0/flex: 3 1 0/flex: 1 1 0 - 固定宽 + 自适应剩余：
flex: 0 0 120px（固定）+flex: 1 1 0（剩余全占） - 文字容器防换行溢出：
min-width: 0配合flex: 1 1 0，强制文本收缩而非撑宽
