图片在flex中变形是因默认min-width:auto与flex-shrink:1冲突，需对img设flex:0 0 auto、min-width:0、width:auto、height:auto，再配object-fit及宽高声明。
直接给图片加 flex: 0 0 auto + min-width: 0 + object-fit，否则在窄屏或嵌套 Flex 中必变形。
为什么图片在 Flex 里一缩放就拉伸/坍缩？
不是浏览器 bug，是 Flex 默认行为叠加了 CSS 替换元素的固有约束。图片作为替换元素，默认 min-width: auto，在空间不足时宁可溢出也不缩小；但一旦父容器设了 flex-shrink: 1（默认值），它又会被强行压扁成竖线。
-
flex-shrink: 0单独写无效——浏览器会 fallback 到flex-basis: 0，图片直接塌成一条线 - 真正起效的是完整声明：
flex: 0 0 auto（等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto） - 必须额外加
min-width: 0在<img>或其**直接父容器**上，否则浏览器拒绝压缩替换元素 -
width: auto; height: auto也要显式写，防框架或重置样式覆盖固有尺寸
object-fit 总是不生效？先检查外框是否稳定
object-fit: cover 或 contain 不是“修复开关”，它只在图片已有明确宽高框时才工作。如果外框已被 Flex 压缩失真，object-fit 只能在扭曲画布上裁图。
- 顺序不能错：① 父容器
display: flex→ ②<img>上写flex: 0 0 auto; min-width: 0; width: auto; height: auto→ ③ 再加object-fit -
object-fit必须配合width和height（哪怕写width: 100%或height: 100%），否则不触发渲染 - IE 全系不支持
object-fit，需降级用背景图 +background-size
文字和图片顶部对不齐？别调 vertical-align
Flex 容器中 vertical-align 对子元素完全无效。对不齐的根因是 align-items: stretch（默认值）把图文都拉到容器高度，而图片高度不一致、文字行高又撑开容器。
- 统一顶部对齐：父容器加
align-items: flex-start - 若要垂直居中：改用
align-items: center，但得确保<img>是display: block（防基线留空） - 文字容器若内容过长，加
min-width: 0防止 Flex 拒绝收缩导致换行错乱 - 绝对不要用
margin-top手动“凑对齐”——这是 hack，缩放或内容变化时立刻失效
IE11 下 Flex 媒体对象全乱？补老语法+禁用 gap
IE11 的 flex 解析极不稳定，尤其嵌套场景下 flex: 1 常被忽略，align-items: stretch 渲染异常。
- 左侧图标容器必须写全：
flex: 0 0 auto（不能简写为flex: none） - 右侧内容区写：
flex: 1 1 0%（不是flex: 1），显式定义flex-basis: 0% -
gap在 IE11 完全不支持，用margin模拟间距，比如margin-right: 16px - 避免
width: 100%—— 它和flex-basis冲突，Safari 和 IE 表现尤其混乱
最易被忽略的一点：所有这些规则只对**直接子元素**生效。如果媒体对象结构是 <div class="media">
<div class="media__figure"><img></div>
<div class="media__body">...</div>
</div>，那 min-width: 0 和 flex: 0 0 auto 必须落在 <img> 上，或者落在 .media__figure 上——但不能只写在 .media 容器上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
