flex子元素被压缩的典型表现是内容变窄、文字换行、图标挤压，主因是默认flex-shrink:1导致空间不足时主动收缩；可通过flex-shrink:0阻止，但需配合min-width且仅作用于特定子项。
flex 子元素被压缩的典型表现
当父容器设为 display: flex，子元素内容较短（比如文字少、图片小）却莫名变窄、文字换行、图标被挤压时，大概率是 flex-shrink 在起作用。默认值为 1，意味着所有子元素在空间不足时都会主动收缩——哪怕你没写任何宽度控制。
如何用 flex-shrink: 0 阻止压缩
给需要“保持原始尺寸”的子元素显式设置 flex-shrink: 0，它就不再参与空间争夺。注意这不是万能解法，需结合具体布局意图判断：
- 只对特定子项加，别误加到整个
flex容器上 - 若该子项本身有
width或min-width，flex-shrink: 0才真正生效；否则它仍可能因内容塌缩而显得窄 - 和
flex-grow同时存在时，flex-shrink: 0仅控制收缩行为，不影响放大逻辑
.item-keep-width {
flex-shrink: 0;
min-width: 120px; /* 推荐配合 min-width 使用 */
}
flex 简写属性里怎么控制 shrink
flex 是 flex-grow flex-shrink flex-basis 的简写，顺序固定。想禁用收缩，必须明确写出第二个参数：
-
flex: 0 0 auto→ 不放大、不收缩、按内容宽 -
flex: 1 0 200px→ 可放大、不收缩、初始宽 200px -
flex: 0 1 auto→ 默认值，会收缩（容易踩坑）
漏掉第二个值（如写成 flex: 0 200px）会导致浏览器把 200px 当作 flex-shrink，实际变成 flex-shrink: 200，反而加剧压缩。
立即学习“前端免费学习笔记（深入）”；
为什么有时设了 flex-shrink: 0 还是被压
常见干扰因素：
- 父容器设置了
overflow: hidden或text-overflow: ellipsis，视觉上像被压缩，实则是截断 - 子元素内部用了
white-space: nowrap但父容器太窄，文字溢出不可见 - 其他 flex 项设了
flex-grow: 1，强行撑满剩余空间，把未设flex-shrink: 0的兄弟项挤变形 - 使用了
fit-content或max-content作为flex-basis，在某些浏览器中计算不稳定
排查时优先检查 computed styles 中 flex-shrink 是否真为 0，再看 min-width 和父容器约束是否合理。
