flex-shrink: 0能跳过压缩计算但单独无效，因其仅跳过收缩步骤，不定义尺寸起点；必须配合flex: 0 0 auto、width: auto、height: auto和min-width: 0，才能以固有尺寸为基准并解除替换元素的隐式宽度锁定。
flex-shrink: 0 为什么能跳过压缩计算，但单独写没用？
它不是“锁尺寸”，而是让浏览器在 flex 布局的收缩阶段直接跳过该元素——不参与加权溢出量分配，也不被按比例压缩。但问题在于：跳过之后，浏览器仍需一个起点来渲染图片。若没显式提供尺寸锚点，它会 fallback 到 flex-basis: 0（坍缩成线）或 flex-basis: 100%（拉伸变形），根本原因不是没禁压缩，而是没定义“从哪开始”。
-
flex-shrink: 0单独写，等于只关了门，没给椅子 - 必须配
flex: 0 0 auto（等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto），把 intrinsic size 当作起点 - 再补
width: auto; height: auto，防 Tailwind 或 Preflight 重置样式覆盖原始比例
为什么图片和文本同级时，文本反而把图片压扁了？
因为默认 min-width: auto 是替换元素（、
- 文本容器默认也带
min-width: auto，但它会触发换行；图片不会 - 解法不是压制文本，而是解除图片的隐式锁定：
min-width: 0 - 这句必须加在
上（或其直接父 wrapper），不是加在文本上，也不是加在最外层容器
哪些地方最容易漏掉 min-width: 0？
它只对 直接 flex item 生效，且只在主轴方向起作用：
- 卡片结构是
<div class="card"><div class="content"> <p>文本</p> <img> </div></div>→min-width: 0要加在.content上，不是p或img - React/Vue 中图标常被包在组件内，真实 DOM 是
<div><myicon></myicon></div>→flex-shrink: 0和min-width: 0得加在MyIcon渲染出的svg或img元素上 - Safari ≤15.6 下，
flex: 1不自动推导min-width: 0，必须显式写 -
flex-direction: column时，要改用min-height: 0，min-width: 0无效
object-fit 和 flex-shrink 的配合顺序为什么不能反？
object-fit 只控制“内容怎么填进框”，不控制“框自己缩不缩”。如果外框已被 flex-shrink: 1 压成 20px 宽，object-fit: cover 只能在扭曲画布上裁图，结果仍是变形。
- 正确顺序：先稳外框 →
flex: 0 0 auto; width: auto; height: auto; min-width: 0 - 再控内容 →
object-fit: contain或object-fit: cover - 别写
width: 100%; height: 100%，这是强制拉伸，直接破坏 intrinsic ratio
真正难的不是加哪一行 CSS，而是判断这个 在所有断点下是否真的“不能小”——它和旁边文本共享同一根弹性轴，但语义完全不同：文本可折行、可截断；图片必须保比例。混用或漏写
min-width: 0、flex-basis、width/height，问题只会从水平挤压转移到纵向坍缩，或者从加载闪动变成布局错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
