flex-shrink触发收缩的条件是容器主轴总可用空间小于所有子项flex-basis（或内容宽度）之和；此时按「flex-basis×flex-shrink」加权分配溢出空间，值为0则完全不缩但权重仍计入分母。
flex-shrink 不是“可有可无”的收缩开关，而是决定空间不足时谁先让、让多少、甚至谁完全不退的关键权重因子。它不控制是否收缩（那是 flex-basis 和容器尺寸共同触发的），而是控制收缩的分配逻辑。
flex-shrink 触发收缩的条件是什么
它只在一种情况下起作用：容器主轴总可用空间 小于 所有子项的 flex-basis（或内容宽度，若未设 flex-basis）之和。此时浏览器才会启动收缩算法。
- 如果容器足够宽，
flex-shrink: 0和flex-shrink: 99效果完全一样——都不收缩 -
flex-basis: auto时，浏览器取元素内容宽度（如文本撑开的宽度、图片固有宽）作为计算基准，不是渲染后最终宽 - 设置
min-width会阻止收缩低于该值，但flex-shrink仍参与前期权重计算，只是最终结果被截断
flex-shrink 值怎么影响实际收缩量
收缩量不是按 flex-shrink 值线性切分剩余缺口，而是按「flex-basis × flex-shrink」加权分配。这意味着一个宽项目配高 flex-shrink，会被压得更狠；窄项目即使 flex-shrink 相同，也缩得少。
- 三个项目：
flex-basis: 200px/300px/100px，flex-shrink分别为1/2/3→ 权重 =200×1=200、300×2=600、100×3=300→ 总权重1100 - 缺口 300px → 项目2拿走
600/1100 × 300 ≈ 164px，项目3拿走300/1100 × 300 ≈ 82px，项目1仅55px - 设
flex-shrink: 0的项目，其权重计入分母但自身收缩量强制为 0，其余项目承担全部缺口
常见误用：flex-shrink: 0 并不等于“固定宽度”
很多人以为设了 flex-shrink: 0 就能锁死宽度，其实它只禁用收缩逻辑，但无法抵抗其他 CSS 行为：
- 若项目内含长单词或未换行文本，仍可能溢出容器（需配合
overflow-wrap: break-word或white-space: nowrap） - 若父容器用了
flex-wrap: wrap，flex-shrink: 0不阻止换行，只阻止单行内压缩 - 当多个
flex-shrink: 0项目并存且总宽超容器时，它们会集体溢出，浏览器不会自动隐藏或滚动（除非显式设overflow）
真正难的是预判多级嵌套中每个 flex-shrink 如何叠加影响——比如一个卡片组件内部用 flex 排列头像、标题、操作按钮，标题又嵌套了带 flex-shrink: 1 的文字容器，这时缩小屏幕，到底是标题先缩、还是按钮先挤、还是头像被裁？答案取决于每一层的 flex-basis 实际值和所有相关 flex-shrink 的乘积权重。这种链式依赖，没法靠试错调出来，必须从结构设计阶段就写清楚每层的收缩意图。
