根本原因是子项默认 flex-shrink: 1 导致空间不足时强制压缩；首选解法是对关键元素设 flex-shrink: 0，从源头阻断压缩逻辑，不影响其他 flex 行为且兼容性好。
Flex布局下元素被挤压变形，根本原因不是“容器太小”，而是子项默认启用了收缩行为——flex-shrink: 1在空间不足时会强制压缩所有子项。最直接有效的解法就是对关键元素显式设 flex-shrink: 0，而不是靠猜、调 width 或改 flex-basis。
为什么 flex-shrink: 0 是首选方案
因为它是唯一能从源头阻断压缩逻辑的声明：浏览器在计算“谁该让出空间”时，会跳过 flex-shrink: 0 的项，不参与任何比例分配。相比用 min-width “事后补救”，它更早介入、更确定。
-
flex-shrink: 0不影响其他 flex 行为（如flex-grow或排列顺序） - 它在 IE10+ 中可用（需加
-ms-flex-negative: 0兼容） - 设成
flex-shrink: -1会被忽略并回退到1，别试 - 不要全局重置
* { flex-shrink: 0 }，这会让正常流式布局彻底失效
哪些元素必须加 flex-shrink: 0
不是所有子项都需要，只针对那些“尺寸敏感”的固定型内容：
- 带图标的按钮（图标缩成小点就失去可识别性）
- 头像、徽标、开关控件（宽高比必须稳定）
- 短文本标签（如“已读”“VIP”这类文字，被压成“…”就信息丢失）
- 图片（尤其
<img>，即使写了max-width: 100%，没关flex-shrink仍可能被压扁） - 搜索栏里的提交按钮（输入框用
flex: 1，按钮必须flex-shrink: 0）
flex-shrink: 0 和 flex-basis / width 冲突怎么办
当同时存在 width、flex-basis 和 flex-shrink: 0，浏览器优先级是：flex-basis（非 auto 时） > width（仅当 flex-basis: auto） > 默认内容尺寸。冲突常表现为“明明写了 flex-shrink: 0，还是被压了”。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误写了
flex-basis: 100%或过大值，导致初始尺寸远超容器，flex-shrink: 0只禁压缩，不阻止溢出 - 对图片等替换元素，建议用
flex: 0 0 auto替代单独写flex-shrink: 0，更明确且兼容性一致 - 若需内部文本折行，得额外加
min-width: 0（否则 flex 默认的min-width: auto会锁死最小宽度） - 避免对
<img>直接设width: 100%，它会覆盖 intrinsic 尺寸，和flex-shrink: 0配合反而更易错乱
移动端错位和图片变形的典型组合陷阱
移动端问题往往不是单一属性导致，而是几个默认行为叠加：
- 父容器用了
position: fixed或max-width: 100%→ 宽度受限 - 子项没设
flex-shrink: 0→ 默认1开始压缩 - 图片没配
max-width: 100%+height: auto→ 外框失守，object-fit失效 - 又开了
flex-wrap: wrap→ 看似“被压”，实则是换行挤在一起
真正难调试的点在于：这些表现看起来一样（元素变窄、变形、错位），但根因不同。加 flex-shrink: 0 能解决其中一类，但必须配合开发者工具逐层关闭样式验证，否则容易误判。
