flex-shrink: 0 是最直接解法，它从源头跳过收缩计算，使子项不参与空间分配；但需配合 flex-basis（如 flex: 0 0 200px）、min-width: 0（防替换元素锁死）及 max-width/height 约束，单用无效。
flex-shrink: 0 是最直接的解法
子元素写了 width: 200px 还被压，不是 CSS 写错了，而是 flex-shrink: 1 在起作用——它默认开启，只要父容器空间不够，所有子项就会按比例缩小，width 只是初始参考值，不参与弹性分配。
加 flex-shrink: 0 就能从计算源头跳过该子项的收缩流程，浏览器不再把它纳入“谁该让出空间”的名单里。
-
flex-shrink: 0不影响flex-grow或排列顺序，只关收缩 - 别用
flex: 0，它等价于flex: 0 1 0，第二个参数仍是1，会 shrink - 要写全简写：
flex: 0 0 200px（grow/shrink/basis），比单独设width+flex-shrink: 0更可靠 - IE10+ 需补
-ms-flex-negative: 0
为什么 flex-shrink: 0 有时没效果
不是属性失效，而是被其他隐性规则覆盖或抵消。常见原因包括：
- 子项是
<img>或<input>等替换元素，默认带min-width: auto，必须显式加min-width: 0才真正释放限制 - 父容器设了
overflow: hidden，子项虽没缩，但内容溢出被裁，看起来像“被压扁” - 子项内文本用了默认
white-space: normal，宽度一窄就换行，误以为是压缩——应配white-space: nowrap - 祖先元素（比如 Bootstrap 的
.col）悄悄重写了flex-shrink，开发者工具里看 computed styles 才能确认真实值
flex: 0 0 auto 和 min-width: 0 怎么选
二者目标不同：flex-shrink: 0 是“我坚决不缩”，min-width: 0 是“我允许缩到零，好让文字正常换行”。实际中常组合使用。
- 固定尺寸控件（按钮、头像、开关）：优先用
flex: 0 0 auto或flex-shrink: 0 - 文本容器（如标签、描述段落）：加
min-width: 0+word-break: break-word，否则长单词会撑破布局 -
flex: none等价于flex: 0 0 auto，语义更清晰，比flex: 0安全 - 别对整个容器写
* { flex-shrink: 0 }，这会让正常流式布局彻底失灵
移动端图片变形和错位的典型陷阱
移动端问题往往是多个默认行为叠加的结果，单靠 flex-shrink: 0 不够：
- 父容器用了
max-width: 100%或position: fixed，自身宽度受限 -
<img>没配max-width: 100%+height: auto，导致外框失守 - 图片上直接写
width: 100%，覆盖固有尺寸，和flex-shrink: 0配合反而更容易错乱 - 推荐写法：
img { flex: 0 0 auto; max-width: 100%; height: auto; }
真正容易被忽略的是：flex-shrink 关的是“缩”，不是“溢出”；内容超宽时，它依然会撑破容器或触发横向滚动——得配合父容器的 overflow、max-width 和子项的 min-width 一起调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
