flex子项在窄屏下被压缩是flex-shrink:1的默认行为，非bug；flex-shrink:0常因flex简写覆盖、父容器未设flex、img未设width:auto等失效；稳住尺寸需用flex:0 0 auto+width:auto+min-width:0。
flex-shrink: 1 在窄屏下主动触发压缩，不是 bug 是默认行为
Flex 子项在移动端“被压扁”，根本不是缩放或 viewport 导致的视觉错觉，而是浏览器严格执行了 flex-shrink: 1 —— 只要父容器总可用宽度小于所有子项的 flex-basis（或内容固有宽度）之和，收缩逻辑立刻启动，按比例缩小每个子项。哪怕你写了 width: 120px，它也只当参考值，不参与最终布局计算。
只写 flex-shrink: 0 为什么经常失效
看似加了但没用，大概率卡在这几个环节：
-
flex-shrink: 0被flex: 1或flex: auto这类简写覆盖——它们隐含flex-shrink: 1，且优先级更高 - 父容器没设
display: flex或display: inline-flex，整个 flex 属性链都不解析 - 子项是
<img>且没配width: auto; height: auto，浏览器用重置样式覆盖了 intrinsic size - 祖先元素有
overflow: hidden+text-overflow: ellipsis+white-space: normal组合，造成截断假象 - iOS Safari 默认给 flex item 加
min-width: auto，必须显式写min-width: 0才真正释放
图片/图标/按钮这类固定尺寸元素怎么稳住不塌
对尺寸敏感的内容，不能只靠 flex-shrink: 0，得锁定三要素：
- 用
flex: 0 0 auto显式禁用伸缩、锚定固有尺寸（比单独写flex-shrink: 0更可靠） - 同步加
width: auto; height: auto，防止框架或 reset.css 覆盖原始比例 - 若父容器是
flex-direction: column且align-items: stretch，图片会被垂直撑开 → 此时必须加object-fit: contain或改父容器align-items: flex-start - 嵌套 Flex 中的
<img>，务必在<img>自身或其**直接父容器**上加min-width: 0
真机调试时最该盯住的三个 computed 值
别只信你在 Styles 面板写的值。打开 DevTools，选中子元素后重点核对：
-
Layout Width：它才是最终渲染宽度，对比你预期的最小值（比如 120px）是否一致 -
flex-basis在 Computed 标签页里的实际解析值：常显示为auto或像素值，而非你写的120px；iOS Safari 和 Android WebView 解析差异大，必须真机验证 -
min-width实际生效值：确认是不是被框架悄悄设成了auto，而不是你写的0或fit-content
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
