保持Flex项目宽高比的关键是flex-basis设为auto或内容尺寸，配合aspect-ratio（现代）或padding-top伪元素（兼容），并设flex-shrink:0防压缩；推荐写法：flex: 0 0 auto; width: 100%; aspect-ratio: 16/9。
想让 Flex 项目在容器缩放时保持自身宽高比（比如图片、卡片、视频容器），关键不是靠 flex-grow 或 flex-shrink 直接控制，而是用 flex-basis 配合 min-width/max-width 和一个“比例占位”技巧——最稳妥的方式是结合 aspect-ratio（现代浏览器）或伪元素 + padding-top（兼容旧版），再让 flex-basis 设为 auto 或具体值，同时禁用不必要拉伸。
用 flex-basis: auto + aspect-ratio 最简方案
当父容器是 display: flex，子项设 flex: 0 1 auto（即不放大、可缩小、基础尺寸按内容），再加 aspect-ratio: 16 / 9，浏览器会自动维持宽高比，并根据可用空间等比缩放：
-
flex-basis: auto表示以内容固有尺寸（如图片 intrinsic size）或width/height为基准 -
aspect-ratio强制宽高比，缩放时只调整宽度（主轴），高度自动跟随 - 搭配
width: 100%可确保占满主轴剩余空间，且不失真
兼容老浏览器：padding-top 百分比占位法
对不支持 aspect-ratio 的环境（如 Safari 15.4 之前），用伪元素撑开高度：
- 给 flex 项目设
position: relative; width: 100%; flex-basis: auto; - 内部加一个
::before伪元素，padding-top: 56.25%（对应 16:9） - 真实内容用
position: absolute; inset: 0;覆盖填充 - 此时
flex-basis: auto让 flex 容器按伪元素高度（即比例）计算主轴外尺寸，缩放自然守比
避免 flex-shrink 破坏比例的细节
即使设了比例，若 flex-shrink: 1（默认）且空间不足，项目可能被强制压缩变形。解决方法：
立即学习“前端免费学习笔记（深入）”；
- 设
flex-shrink: 0禁止压缩，靠父容器溢出或滚动处理空间不足 - 或设
min-width: 0+min-height: 0（防止内容最小尺寸干扰），再配合overflow: hidden容错 - 慎用
flex: 1—— 它等价于flex: 1 1 0%，flex-basis: 0%会丢弃原始比例，导致拉伸失真
实际推荐组合写法
兼顾现代与兼容、缩放守比又不溢出：
.item {
flex: 0 0 auto; /* 不放大、不缩小、基础尺寸按内容 */
width: 100%;
aspect-ratio: 16 / 9; /* 现代浏览器直接生效 */
/* 回退方案（可选）：用 padding-top 占位 + position 填充 */
}
.item > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}如果必须兼容 IE 或老 Safari，就把 aspect-ratio 换成伪元素结构，其余保持 flex: 0 0 auto 不变。
基本上就这些。核心就一条：别让 flex-basis 覆盖掉原始尺寸或设成 0%，再用明确的比例约束机制接管高度，flex 自然听话缩放。
