flex-shrink: 0是唯一能从源头阻断压缩的声明，因它让元素跳过负空间分配；width仅为建议值，不具强制力，需配合min-width: 0、max-width: 100%等防止隐性约束干扰。
flex-shrink: 0 是唯一能从源头阻断压缩的声明
Flex 子元素被压扁，不是浏览器 bug，而是 flex-shrink: 1 在严格执行：当所有子项总宽超过容器时，它会按比例缩小每个子项来保容器不溢出。设 flex-shrink: 0 就是告诉布局引擎“跳过我，别分配负空间”。它不影响 flex-grow、order 或排列方向，且 IE10+ 可用（需加 -ms-flex-negative: 0）。
常见误区：flex-shrink: -1 会被忽略并回退到 1；全局写 * { flex-shrink: 0 } 会让整个 Flex 流式逻辑失效；只靠 width 或 max-width 无法阻止压缩启动。
为什么写了 width 还是被压？因为 width 不是强制值
width 在 Flex 容器里只是“建议尺寸”，浏览器优先用 flex-basis（默认 auto）计算基准，再结合 flex-shrink 调整。哪怕你写了 width: 200px，只要没关收缩，它就会被无视。
- 对
<img>、<button></button>这类替换元素，width: auto常被解析为原始固有尺寸（比如 800px），反而加剧溢出风险 - 更稳妥写法是
flex: 0 0 200px：显式声明不放大、不收缩、基准尺寸为 200px，优先级高于单独width - 若需响应式，用
flex: 0 0 auto+max-width: 100%，比硬写像素更健壮
flex-shrink: 0 加了还是变形？检查这三处隐性约束
flex-shrink: 0 本身有效，但常被其他默认行为覆盖：
-
<img>等替换元素默认有min-width: auto（不是0），会锁死最小宽度 → 必须加min-width: 0 - 父容器若没设
width或min-width，自身先塌缩，子项再怎么flex-shrink: 0也无框可守 → 需确保父级主轴尺寸可控 -
width: 100%会覆盖flex-basis: auto，让图片失去原始比例锚点 → 改用width: auto; height: auto，再配max-width: 100%
哪些元素必须加 flex-shrink: 0？别猜，要精准锁
不是所有子项都需要，只针对“尺寸失守就失效”的关键元素：
-
<img>：尤其头像、商品图、Logo，压缩即失比例 - 带图标的
<button></button>或开关控件：图标缩成小点就不可识别 - 短文本标签（如“已读”“VIP”）：被压成“…”就信息丢失
- 搜索栏里的提交按钮：输入框用
flex: 1，按钮必须flex-shrink: 0
移动端错位和图片变形，往往是 flex-shrink: 0 没配 min-width: 0 + max-width: 100% + 父容器 overflow-x: auto 三者缺一导致的。漏掉任意一个，都可能让“不压缩”变成“看起来没用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
