视频在flex布局中默认按基线对齐且为替换元素，易导致视觉错位；需显式设置align-items、控制宽高（如width:0;min-width:100%;aspect-ratio）、合理隐藏（visibility:hidden）并注意移动端touch行为。
flex布局中视频元素默认对齐方式导致位置偏移
video 是替换元素（replaced element），在 flex 容器中默认按基线（baseline）对齐，而非顶部或中心。这会导致它和同级文字、图标等元素视觉错位，看起来“下沉”或“悬空”。
-
align-items: center对video有效，但仅控制交叉轴；主轴仍需justify-content配合 - 若父容器是
display: flex且未设align-items，浏览器按align-items: stretch处理，而video的高度可能被拉伸或受宽高比约束，出现意外留白 - 建议显式设置
align-items: flex-start或center，避免依赖默认行为
示例：让视频居中且不被拉伸
.video-container {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
<p>video {
max-width: 100%;
height: auto;
/<em> 防止 flex stretch 拉高 video </em>/
align-self: center;
}用 flex 实现视频隐藏但保留布局占位
想临时“隐藏”视频又不让周围元素重排（比如加载中占位、错误状态保留空间），不能只用 display: none——它会脱离文档流。
- 用
visibility: hidden：元素仍占布局空间，但不可见、不可交互 - 更精细控制可用
opacity: 0+pointer-events: none，适合过渡动画场景 - 若需响应式隐藏（如小屏下不显示视频但留空），配合
@media和visibility更稳妥，避免display切换引发 flex 重计算
注意：video 元素即使 visibility: hidden，仍会触发 load、canplay 等事件，逻辑层无需改动。
立即学习“前端免费学习笔记（深入）”；
flex 中 video 宽高失控的常见原因
video 在 flex 容器里容易撑开父容器、溢出或压缩变形，核心是它同时受 CSS 尺寸规则 + 内置宽高比双重影响。
- 默认
video的width是auto，flex 主轴尺寸计算时可能取内容固有宽度（如 640px），导致横向溢出 - 解决方法：强制设置
width: 0; min-width: 100%，让 flex 按容器分配空间，再由max-width: 100%限制上限 - 若需保持宽高比（如 16:9），用
aspect-ratio: 16/9（现代浏览器支持），或退化为 padding-bottom 百分比技巧（需额外 wrapper）
关键组合：
video {
width: 0;
min-width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 16/9;
}移动端 flex 视频缩放与 touch 事件冲突
iOS Safari 和部分安卓浏览器在 flex 布局中对 video 的 pinch-zoom 行为较敏感，尤其当父容器有 transform 或 scale 时，可能导致双指缩放失效或触发页面回弹。
- 禁用用户缩放：在
video上加touch-action: pan-y（允许上下滚动，禁用缩放） - 避免对
video直接应用transform: scale()，改用width/height控制尺寸 - 若必须缩放，把
video包进一个position: relative的 wrapper，缩放 wrapper 而非 video 本身
特别注意：某些安卓 WebView 里，video 的 object-fit 在 flex 下表现不稳定，建议始终显式设置 object-fit: contain 或 cover。
flex 处理视频时最易被忽略的是它的“替换元素”本质——它不像普通 div 那样完全服从 flex 尺寸指令，很多问题根源都在这个特性上。
