应给flex子项设置flex-shrink: 0（或flex: 0 0 auto）并确保其有明确宽度来源，避免flex默认收缩破坏aspect-ratio计算；column方向时父容器需设明确宽度，且不可对子项设height或align-self: stretch。
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>或<video></video>上
<img> 和 <video></video> 是替换元素（replaced element），其尺寸由固有宽高或显式 width/height 属性决定，aspect-ratio 在它们上面无法触发布局计算。
实测现象包括：
- 高度塌陷为 0，只留一条线
- 懒加载后容器突然“跳高”，造成 CLS（布局偏移）
- Safari 15.3 及更早版本完全忽略该声明
正确做法是套一层容器：
<div class="media-container" style="aspect-ratio: 16 / 9; width: 100%; flex-shrink: 0;"> @@##@@ </div>
这个容器必须满足三个硬条件：是块级/Flex/Grid 子项、有明确宽度、未声明 height（包括 height: auto）。
最易被忽略的是：很多人以为写了 aspect-ratio 就万事大吉，其实它极度依赖上下文——宽度是否真能被测量、height 是否真的没被任何规则覆盖、父级 Flex 是否悄悄在压缩它。稍有偏差，比例就崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
