视频在flex中缩放变形的直接原因是min-width: auto限制子项最小宽度，导致aspect-ratio失效；需对容器设min-width: 0、width: 100%、aspect-ratio，并确保video元素填满且用object-fit控制缩放。
直接用 aspect-ratio + width: 100% 就能稳住视频比例，但必须配合 min-width: 0 和容器 flex-wrap 控制，否则 Flex 会强行撑高或截断。
为什么视频在Flex里一缩就变形
Flex 容器默认给子项加了 min-width: auto，意思是“不能比内容本身还窄”。对 <video></video> 这种替换元素来说，浏览器会按其固有尺寸（比如 640×360）设最小宽度，导致：容器变窄时，它宁可溢出或拉伸也不缩——不是没缩，是被这个隐性限制卡死了。
- 现象：小屏下视频高度突兀变高、左右留白、甚至触发横向滚动条
- 根本原因不是
object-fit没写，而是min-width: auto在前头拦着 -
flex-shrink: 1单独设没用，它得有收缩空间，而min-width: auto把空间锁死了
aspect-ratio 必须作用于容器，不是 video 元素本身
aspect-ratio 是给包裹 <video></video> 的那个 div（比如 .video-wrap）设的。直接写在 <video></video> 上无效，因为 video 是替换元素，不响应该属性。
- 正确写法：
.video-wrap { aspect-ratio: 16/9; width: 100%; } - video 内部要填满：
.video-wrap video { width: 100%; height: 100%; object-fit: cover; } - 别漏掉
min-width: 0：.video-wrap { min-width: 0; }——这是让aspect-ratio能随父容器缩放的前提 - 兼容 Safari 15.3 及更早？改用
padding-bottom: 56.25%+position: relative/absolute组合
Flex 容器怎么配才不破坏等比效果
Flex 容器本身不能靠 flex: 1 或 flex-grow 去“拉”视频容器的高度，那会覆盖 aspect-ratio 计算出的比例。关键在宽度分配和换行控制。
- 禁用弹性拉伸：
.video-container { display: flex; flex-wrap: wrap; }，别设align-content: flex-end（会把所有行压到容器底） - 每项宽度用
calc()精确控制：.video-wrap { width: calc((100% - 3vmin) / 4); }（4 列时），减去的是整行 gap 总和，不是单个 gap - 确保子项不撑高容器：
.video-wrap { flex-shrink: 0; }或干脆不设flex-shrink，靠width+aspect-ratio主导尺寸 - 如果画廊纵向太长，用
.video-container { overflow-y: auto; }代替让页面整体滚动
最易忽略的是 min-width: 0 ——它不在任何 Flex 教程的 headline 里，却是 aspect-ratio 能响应缩放的开关。没它，再准的 calc() 和再新的 aspect-ratio 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
