aspect-ratio在flex项目中能用，但必须设flex-shrink: 0并确保宽度可测，否则会被压缩导致比例失效；需配合width: 100%、object-fit及overflow: hidden，并避免align-self: stretch或height冲突。
aspect-ratio 在 Flex 项目中能用，但必须绕开 Flex 默认压缩行为，否则比例会被强行拉垮。
Flex 子项加 aspect-ratio 却被压扁了
这是最常见失效场景：父容器设了 display: flex，子项写了 aspect-ratio: 16 / 9，但高度塌陷或比例错乱。根本原因是 Flex 默认允许子项收缩（flex-shrink: 1），而 aspect-ratio 的高度计算依赖“宽度可测 + 高度未锁定”，一旦被压缩到极窄，宽度不可靠，比例就失效。
实操建议：
- 给子项显式加
flex-shrink: 0，阻止它被挤压 - 确保子项有明确宽度来源，比如
width: 100%、flex-basis: 300px或父容器设置了flex-direction: row且列宽固定 - 别写
min-width: 0—— 它会解除 Flex 的默认最小宽度保护，让aspect-ratio失效 - 检查 computed styles 中
aspect-ratio是否显示为 “active”；若被划掉，大概率是浏览器不支持或存在height冲突
flex: 0 0 auto 是比 flex: 1 更安全的起点
很多人习惯写 flex: 1 让子项撑满，但这等于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，其中 flex-basis: 0% 会让宽度失去基准，aspect-ratio 无法推导高度。
正确做法是用 flex: 0 0 auto（即不放大、不缩小、基础尺寸按内容或宽度决定）：
-
flex-basis: auto保证宽度有据可依（比如来自width: 100%） -
flex-shrink: 0防止被 Flex 容器强制压缩 - 再叠加
aspect-ratio: 16 / 9和width: 100%，就能稳定生效
Flex 容器是 column 方向时要额外小心
当 flex-direction: column，主轴变垂直，子项宽度不再由 Flex 控制，而是继承父容器宽度。此时若父容器没设 width，子项宽度可能不可测，aspect-ratio 就算写了也白搭。
关键点：
- 父容器必须有明确宽度（如
width: 100%或固定值） - 子项仍需
flex-shrink: 0，否则在空间不足时会被压扁高度 - 避免对子项设
align-self: stretch或align-items: stretch，这会强制拉高，覆盖aspect-ratio计算 - 若子项内含图片或视频，记得额外加
object-fit: cover和width: 100%; height: 100%，否则内容不填满
旧浏览器 fallback 必须用 padding-top + position: absolute
Chrome 87 及更早、Safari 15.3 及更早、部分安卓 WebView 完全忽略 aspect-ratio，只留一条线。不能只靠 @supports 包裹，得真降级。
兼容写法要点：
- 父容器设
position: relative; width: 100%; padding-top: 56.25%（16:9） - 子项设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必加
overflow: hidden，防止object-fit: cover失效时内容溢出 - 别用
padding-bottom—— 在 Flex 容器里它可能被忽略，padding-top更可靠
aspect-ratio 看似简单，实际成败常取决于那一行 flex-shrink: 0 和是否误删了默认的 min-width: auto。这两个点漏掉，再标准的写法也会在 Safari 或窄屏下突然失真。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
