结论：flex-grow 控制有空余时如何分配，flex-shrink 控制挤不下时如何收缩，flex-basis 设定伸缩前基准宽度；三者协同工作，缺一不可。
直接说结论：选 flex-grow 控制“有空余时怎么分”，选 flex-shrink 控制“挤不下时怎么缩”，选 flex-basis 控制“伸缩前的起手宽度”。三者不是互斥选项，而是协同工作的三个环节；漏掉任意一个，都可能让布局在不同容器尺寸下行为失控。
flex-grow 不是“填满父容器”的万能开关
很多人设 flex-grow: 1 就以为子项会自动撑满剩余空间，结果发现没反应——根本原因是 flex-basis 没配合好。
-
flex-grow只在容器主轴方向有「剩余空间」时才生效（即所有项目flex-basis总和 - 如果子项写了
width: 200px但没写flex-basis，它默认用flex-basis: auto，此时取的就是width值；但如果同时写了flex-basis: 0，width就被无视，基准变成 0，flex-grow分配的是“纯剩余空间” - 多个子项都设
flex-grow时，分配比例看数值比，不是绝对值：比如flex-grow: 2和flex-grow: 1，前者拿 2/3 剩余空间，后者拿 1/3 - 设
flex-grow: 0（或不设）= 放弃争夺剩余空间，保持基准宽度不动
flex-shrink 默认就启用，但容易引发意外溢出
只要子项总 flex-basis 超过容器宽度，flex-shrink 就会介入压缩——哪怕你没显式写它，因为它的默认值就是 1。
- 压缩不是按
flex-shrink数值等比缩，而是按flex-shrink × flex-basis加权计算：基准越宽、收缩系数越大，被砍得越多 - 想让某个项“坚决不缩”，必须显式写
flex-shrink: 0；只写flex-grow: 1不影响它收缩 - 文本类内容（如按钮文字、标题）遇到压缩容易换行错乱，这时建议组合使用
flex-shrink: 0+min-width或white-space: nowrap - 移动端小屏下常见问题：图标+文字并排，文字项被大幅压缩导致截断，根源常是没关掉它的
flex-shrink
flex-basis 是三者里最易被忽略的“起手式”
flex-basis 决定了伸缩计算的起点，但它既不是 width 的替代品，也不总是覆盖 width——它只在 flex 主轴方向起效，且优先级高于 width（当两者冲突时）。
-
flex-basis: auto（默认）= 先看width（水平主轴）或height（垂直主轴），没设就看内容宽度 -
flex-basis: 0是关键技巧：配合flex-grow实现“均分容器”，避免内容宽度干扰分配逻辑（例如三栏卡片，每栏设flex: 1 0 0） -
flex-basis: 20%等百分比值，是相对于容器宽度计算的，但注意：它只在伸缩前生效，后续仍会被flex-grow/flex-shrink调整 - 慎用
flex-basis: content（部分浏览器支持有限），实际项目中不如用flex-basis: auto+ 显式width更可控
真正难的不是记住每个属性的定义，而是意识到它们构成一个计算流水线：flex-basis 定起点 → 容器算出剩余/溢出空间 → flex-grow 或 flex-shrink 按规则再分配。任何一环设错，都会在响应式断点或内容长度变化时暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
