flex子元素被挤压是因默认flex-shrink:1主动压缩，非布局错误；解决需设flex-shrink:0或更稳妥的flex:0 0 auto，并对图片等替换元素额外加min-width:0。
移动端 Flex 元素被挤压，不是布局写错了，而是默认的 flex-shrink: 1 在主动压缩——关掉它，问题就解了一大半。
为什么写了 width 还是被压扁
因为 width 在 Flex 容器里只是“建议值”，真正参与尺寸计算的是 flex-basis，而所有子项默认带 flex-shrink: 1。只要总宽超限，浏览器就无视你写的 width: 120px，直接按比例缩小。
-
flex-shrink: 0是唯一能从计算源头跳过收缩逻辑的声明 - 别写
flex-shrink: -1，会被忽略并回退到1 - 用
flex: 0 0 auto比单独写flex-shrink: 0更稳妥，它同时锁死flex-grow、flex-shrink和flex-basis，避免被其他简写覆盖 - 对
<img>标签，单写flex-shrink: 0风险高，必须配合flex: 0 0 auto+max-width: 100%+height: auto
哪些元素必须加 flex-shrink: 0
不是所有子项都需要，只针对那些“尺寸敏感”的固定型内容：
- 带图标的按钮（图标缩成小点就失去可识别性）
- 头像、徽标、开关控件（宽高比必须稳定）
- 短文本标签（如 “VIP”“已读”，一压就变 “…”）
-
<img>（哪怕写了max-width: 100%，不关flex-shrink仍可能被压扁） - 搜索栏里的提交按钮（输入框用
flex: 1，按钮必须flex-shrink: 0）
加了 flex-shrink: 0 还是变形？检查这几点
常见原因不是 flex-shrink 失效，而是隐性约束没解除：
-
<img>等替换元素自带min-width: auto，必须额外加min-width: 0才生效 - 父容器自身没设
min-width或被外层 Flex 压缩，子项再怎么flex-shrink: 0也无框可守 - 误设了
flex-wrap: wrap，看起来像压缩，其实是换行；确认是否真需要单行显示 - 祖先元素有
overflow: hidden或text-overflow: ellipsis，配合默认white-space: normal导致文字换行，误判为挤压 - 调试时直接看开发者工具 computed styles 里的
flex-shrink值，别猜；整条 Flex 链路都要检查，不止当前元素
移动端特有的坑：min-width: 0 必须加在直接子项上
min-width: 0 不是万能补丁，它必须加在「直接参与弹性分配」的子元素上：
- 水平布局（
flex-direction: row）→ 给子项加min-width: 0 - 垂直布局（
flex-direction: column）→ 改用min-height: 0 - 如果子项内部还有 Flex 容器（比如
.item > .inner-flex），.inner-flex也要单独加min-width: 0 - 别依赖全局重置
* { min-width: 0 }，某些 UI 库会覆盖它；DevTools 的 Computed 面板里确认值是0才算生效
真正容易被忽略的是：同一元素上 flex-shrink: 0 和 min-width: 0 往往要一起上，尤其对图片和含长单词的文本；缺一个，Flex 就可能继续“合理地”破坏你的布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
