Flex子项aspect-ratio失效的根本原因是flex-shrink:1导致宽度被压缩而失去参考，需设flex-shrink:0、明确width或flex-basis，并避免min-width:0、height冲突及替换元素直接使用。
Flex子项写了aspect-ratio却压扁了怎么办
根本原因是 Flex 默认允许收缩（flex-shrink: 1），而 aspect-ratio 的高度计算依赖「宽度可测 + 高度未锁定」。一旦子项被压缩到极窄，宽度失去参考值，比例就失效。
必须显式阻断这个行为：
- 给子项加
flex-shrink: 0（或用flex: 0 0 auto替代） - 确保子项有明确宽度来源：比如
width: 100%、flex-basis: 300px，或父容器在row方向下有列宽约束 - 绝对不要写
min-width: 0——它会解除 Flex 默认最小宽度保护，让aspect-ratio失效 - 检查 DevTools 中
aspect-ratio是否被划掉：若被划掉，大概率是存在height冲突，或浏览器不支持（如 Safari 15.3 及更早）
flex: 1 为什么会让 aspect-ratio 失效
flex: 1 展开后是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，问题出在 flex-basis: 0%——它让子项初始宽度为 0，aspect-ratio 没法推导高度。
正确起点是 flex: 0 0 auto：
立即学习“前端免费学习笔记（深入）”；
-
flex-grow: 0：不放大，避免抢空间 -
flex-shrink: 0：不缩小，守住宽度基准 -
flex-basis: auto：宽度按内容或显式width决定，为aspect-ratio提供可靠输入
再配合 width: 100% 和 aspect-ratio: 16 / 9，就能稳定生效。
Flex容器是column方向时的特殊处理
当 flex-direction: column，主轴变垂直，子项宽度不再由 Flex 分配，而是继承父容器宽度。此时若父容器没设 width，子项宽度不可测，aspect-ratio 就白写了。
关键动作：
- 父容器必须有明确宽度（如
width: 100%或固定值width: 400px） - 子项仍需
flex-shrink: 0，否则空间不足时会被压扁高度 - 禁用
align-self: stretch或全局align-items: stretch，它们会强制拉高，覆盖aspect-ratio计算 - 子项内含图片/视频时，额外加
object-fit: cover、width: 100%、height: 100%，否则内容不填满
aspect-ratio 不能直接写在 <img alt="在现代CSS中Flex子项的aspect-ratio纵横比该如何稳定生效" > 或 <video></video> 上
<img alt="在现代CSS中Flex子项的aspect-ratio纵横比该如何稳定生效" > 和 <video></video> 是替换元素，浏览器优先尊重其固有尺寸或 HTML 的 width/height 属性，aspect-ratio 被静默忽略。
必须用块级容器包裹：
- 外层容器设
display: block（或grid，避开 Safari 的 flex bug）、width: 100%、aspect-ratio: 16 / 9 - 内部媒体元素移除所有 HTML
width和height属性，并设width: 100%、height: 100%、object-fit: cover - 务必加
overflow: hidden到 wrapper，防止object-fit: cover失效时内容溢出
最易被忽略的是：父容器是否脱离文档流、是否设置了 height: auto、是否漏了 width: 100%——这三者任一缺失，都会导致高度塌陷，且 DevTools 不报错，只显示 height: auto 或 0px。
