flex布局最稳，左侧需设flex-shrink:0和box-sizing:border-box，右侧禁用width:100%；视频容器须套div设aspect-ratio，video本身用absolute+object-fit；列表点击需统一状态管理，动态新增项要控grid-auto-rows和align-self。
右侧视频列表 + 左侧播放器的布局，用 display: flex 最稳，grid 次之；但写错一个属性，小屏下列表就缩成一条竖线，或点击后视频不加载。
左侧固定宽度、右侧自适应用 flex 布局时必须加 flex-shrink: 0
很多人直接写 .sidebar { width: 240px; } + .main { flex: 1; }，结果小屏下左侧被压缩、右侧文字换行错乱。根本原因是没阻止左侧收缩——flex-shrink: 0 才是关键。
-
flex-shrink: 0必须显式声明，否则默认为 1，浏览器会按内容挤压左侧宽度 - 如果左侧有
padding或border，务必配box-sizing: border-box，否则实际宽度超 240px - 右侧不要设
width: 100%，它会和flex: 1冲突，导致布局断裂 - 移动端可加
@media (max-width: 768px) { .container { flex-direction: column; } }切换为上下堆叠
右侧列表项点击高亮 + 播放对应视频的 DOM 绑定要点
每个 <li> 要当单选按钮用，但原生 click 和 mouseenter 混用容易状态错乱。重点不是“怎么加事件”，而是“怎么避免重复绑定和残留”。
- 首次加载后，只对第一个
<li>调用video.load()+video.play()，否则部分浏览器会报NotAllowedError - 点击某项时，先遍历所有
<li>移除active类，再给当前项加类；别依赖event.target的父级判断，DOM 结构微调就失效 -
mouseenter只用于显示播放图标（如加::after），别在里面调play()—— 鼠标划过就自动播，体验极差 - 更换
video.src后，必须紧跟video.load()，否则新地址可能缓存旧元数据，导致时长/封面不更新
aspect-ratio: 16 / 9 在视频容器上失效的常见原因
写了 aspect-ratio 却还是拉伸变形？大概率是作用对象错了——它不能直接写在 <video></video> 上，而要套一层容器。
立即学习“前端免费学习笔记（深入）”；
-
<video></video>元素本身设height: 100%会无视aspect-ratio，必须删掉 - 正确结构：外层
<div class="video-wrapper"> 设 <code>aspect-ratio: 16 / 9+position: relative，<video></video>设position: absolute; width: 100%; height: 100%; object-fit: cover - Safari 15.3 以下不支持
aspect-ratio，需降级：用padding-top: 56.25%+ 伪元素撑高，且父容器必须有position: relative - 某些安卓 WebView 对
aspect-ratio计算异常，加min-height: 0可修复 Grid 轨道高度塌陷 - 别用
grid-auto-rows: 1fr，它会让每行强制等高；改用grid-auto-rows: minmax(min-content, max-content) - 给每个列表项加
align-self: start，防止被父轨道居中拉高 - 如果列表项内部用了
display: flex，检查是否意外继承了align-items: stretch，这会让子元素撑满整行高度 - 新增项后无需手动设
grid-row，Grid 默认按源顺序排列；除非跨行，否则加了反而破坏流式布局
动态插入新列表项后 Grid 行高不重排的问题
用 JS 往右侧列表里 append() 新项，发现整行被拉高、左侧视频错位——这不是 Grid 失效，而是你没控制好轨道行为。
最易忽略的是：右侧列表容器的 box-sizing 和左侧视频容器的 position 层级。一个漏了 border-box，整个宽度溢出；一个忘了 relative，absolute 视频就飞出视口。这些细节不报错，但一上线就错位。
