flex-shrink 控制子元素在 flex 容器主轴空间不足时的缩小比例，默认值为 1，需配合 flex-basis 使用才可预测缩放效果，仅在 flex-wrap: nowrap 下生效，且与 transform: scale 有本质区别。
flex-shrink 控制子元素空间不足时的缩小比例
当 flex 容器主轴空间不够，子元素默认会按 flex-shrink 值等比收缩。它的默认值是 1，意味着所有子元素在溢出时“平摊”被压缩的多余空间。
注意：这个行为只在容器设置了 display: flex 且子元素未显式设 flex-shrink: 0 时才生效；单纯写 width 或 max-width 不会触发 flex 缩放逻辑。
-
flex-shrink: 0表示该子元素“宁可换行或溢出，也不缩小”——常用于图标、按钮等需保持尺寸的控件 -
flex-shrink: 2表示它比flex-shrink: 1的兄弟元素多缩一半（比如总需缩 60px，它缩 40px，对方缩 20px） - 实际压缩量还受
flex-basis（初始尺寸）影响：一个flex-basis: 200px; flex-shrink: 1的元素，和一个flex-basis: 100px; flex-shrink: 1的元素，在相同容器中会被压缩掉不同绝对像素数
为什么只设 flex-shrink 不够？必须配合 flex-basis
flex-shrink 不是直接指定“缩小到多少像素”，而是参与一个计算公式：收缩量 = (超出空间 × flex-shrink × flex-basis) / 所有子项的 (flex-shrink × flex-basis) 总和。所以如果没设 flex-basis，浏览器会按内容宽度（content-based width）估算，结果不可控。
常见误操作是只写 flex-shrink: 2 却不写 flex-basis，导致某些文字多的项被意外压扁，而空盒子几乎不动。
- 稳妥做法：统一显式声明
flex: 0 2 200px（即flex-grow: 0; flex-shrink: 2; flex-basis: 200px） - 若希望按百分比基准缩放，可用
flex-basis: 30%，但需确保父容器有明确宽度 - 避免用
flex-basis: auto+ 大段文本，因为文本折行会动态改变 basis，引发布局抖动
flex-shrink 在 wrap: wrap 场景下是否生效
不生效。当容器设了 flex-wrap: wrap，空间不足时浏览器优先选择换行，而不是压缩子元素——flex-shrink 只在 flex-wrap: nowrap（默认）下起作用。
如果你看到子元素在换行后依然被压缩，大概率是父容器本身宽度被外部 CSS（如 max-width、transform: scale）或 viewport 限制了，而非 flex-shrink 在工作。
- 检查 computed styles 中该子元素的
flex-shrink是否为0（某些框架/重置样式会设） - 用 DevTools 的 layout 网格叠加层确认是否真发生了换行，还是只是视觉错觉
- 想强制不换行又可控压缩，就别用
wrap，改用white-space: nowrap配合overflow: hidden更直接
与 transform: scale 缩小的本质区别
flex-shrink 是布局级缩放：它真实减少子元素占用的主轴空间，影响后续兄弟元素位置、文档流、甚至 getBoundingClientRect() 返回值；而 transform: scale(0.8) 只是渲染层变形，不改变布局尺寸，点击热区仍按原始大小响应。
这意味着：如果你需要子元素变小后，旁边的空白区域自动让给其他元素，必须用 flex-shrink；如果只是“看起来小一点”，且不希望影响布局或交互精度，才考虑 transform。
- 移动端慎用
transform: scale缩小按钮，可能导致 touch area 小于 44×44px，违反可访问性规范 -
flex-shrink在 Safari iOS 上兼容性极好（Chrome 21+/Firefox 20+/Safari 6.1+），无前缀需求 - 不要混用：对同一元素同时设
flex-shrink: 1和transform: scale(0.9)，会导致尺寸语义混乱，调试困难
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
