flex-shrink: 0 可阻止子项在容器空间不足时被压缩。因默认 flex-shrink: 1，子项会按比例缩小导致变形；设为 0 后可保图标、按钮、标签等形态稳定，建议配合 flex-basis 和 min-width 使用。
当 Flex 容器空间不足时，子项默认会按 flex-shrink: 1 缩小，导致文字截断、图标变形或布局错乱。最直接有效的解决方式就是给不想被压缩的项目设置 flex-shrink: 0。
为什么子项会被自动压缩？
Flex 布局中，所有项目默认启用收缩（flex-shrink: 1），意味着当容器总宽度小于子项原始宽度之和时，浏览器会按比例缩小每个子项来“腾出空间”。即使你写了 width: 200px 或设置了固定字体大小，只要没关掉收缩，它就可能被压扁。
用 flex-shrink: 0 阻止特定项目被挤压
只需在不想变形的子元素上加一条声明：
.no-shrink { flex-shrink: 0; }
常见适用场景包括：
立即学习“前端免费学习笔记（深入）”；
- 带图标的按钮（防止图标缩成一个小点）
- 固定宽度的开关控件或徽标
- 含短文本的标签（避免文字被挤成“…”）
- 设置了
min-width但依然被压的输入框或下拉框
配合 flex-basis 和 min-width 更稳妥
单设 flex-shrink: 0 有时还不够——如果项目内容本身过长（比如一长串邮箱），又没限制换行或溢出，仍可能撑破容器。建议组合使用：
-
flex-shrink: 0：禁止压缩 -
flex-basis: fit-content或具体值（如200px）：明确基准尺寸 -
min-width: 0（慎用）：仅在需要内部文本可折行时加，避免 flex 默认的最小尺寸锁定 -
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;：对单行文本做优雅截断
检查父容器是否意外启用了 flex-wrap: wrap
有时候看起来是“被压缩”，其实是子项换行了，视觉上像挤在一起。确认父容器没有误设 flex-wrap: wrap，或者子项总宽确实超出容器且未设 flex-shrink: 0。可以用浏览器开发者工具临时勾选/取消 flex-shrink 看效果对比。
基本上就这些。flex-shrink: 0 不复杂但容易忽略，加一行就能保住关键元素的形态。