flex-shrink 控制子项在空间不足时的相对收缩优先级与程度，实际收缩量=（自身flex-shrink×flex-basis）/总权重×溢出空间；默认值为1，设0可禁用收缩，常用于防图标压扁、按钮挤压等场景。
flex-shrink 不是“设置缩小比例”的独立参数，它控制的是当容器空间不足时，子项**相对于其他兄弟元素的收缩优先级和程度**——值本身不直接等于“缩多少”，而是参与一个加权计算。
flex-shrink 的实际计算逻辑
浏览器不会直接按 flex-shrink 值等比压缩元素。真实收缩量 =（该元素的 flex-shrink × 自身 flex-basis） ÷ 所有子项的（flex-shrink × flex-basis）之和 × 总溢出空间。
这意味着：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
flex-shrink: 0表示完全不收缩（哪怕内容溢出容器），这是最常用、也最容易被忽略的兜底手段 - 两个元素都设
flex-shrink: 2，但一个flex-basis: 200px、另一个flex-basis: 100px，前者实际收缩量会是后者的两倍 - 默认值是
1，不是0—— 很多布局崩塌就源于没意识到它默认会收缩
什么时候必须显式写 flex-shrink: 0
以下场景若不设 flex-shrink: 0，极易出现意外压缩：
- 导航栏中带图标的按钮（图标用
<img>或<svg></svg>），图片会被压扁变形 - 输入框 + 按钮组合（如搜索框），按钮宽度被挤成几像素
- 卡片内固定宽高的头像区域，
flex-shrink: 1下可能缩到看不见 - 使用
min-width但未配合flex-shrink: 0，CSS 仍会先收缩再检查最小值，造成闪烁或布局跳动
flex-shrink 和 flex-grow 混用的陷阱
二者共存时，flex-shrink 只在**总尺寸超出容器**时生效；flex-grow 只在**有剩余空间**时生效。但它们共享同一套基础尺寸（flex-basis），容易误判行为：
- 写
flex: 1 2 150px等价于flex-grow: 1; flex-shrink: 2; flex-basis: 150px—— 注意中间那个是flex-shrink，不是比例系数 - 把
flex-shrink设得过大（比如99），并不会让它“优先缩完”，反而可能因权重过高，导致其他元素几乎不缩，整体分配失衡 - IE11 对
flex-shrink计算有 bug：当flex-basis为auto且内容较长时，可能完全忽略flex-shrink
真正要“按比例缩小”，得靠 JS 测量+重设宽度，或者换用 container query + clamp()；纯 CSS 的 flex-shrink 是弹性系统里的协商机制，不是刻度尺。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
