本文介绍如何仅用纯 css（flexbox）构建一个 16:9 图片画廊，使其在固定宽高容器内自动计算最佳行列布局，所有项目等比缩放、尺寸一致、不溢出，无需 javascript。
实现响应式等比缩放画廊的关键，在于放弃 flex: 1 这类弹性拉伸行为——它会导致最后一行子项因剩余空间被强制撑开而失衡（即“底部行变高”问题）。正确思路是：将 .video 设为具有明确宽度的块级元素，并通过 calc() 动态扣除间距，再结合 flex-wrap 让其自然折行。
✅ 核心方案：width: calc(N% - gap) + flex-wrap
假设希望每行最多显示 4 项（常见网格基数），且项间水平 gap: 1vmin，则每个 .video 的宽度应为：
.video-container .video {
width: calc(25% - 0.75vmin); /* 25% = 100% / 4；减去 3 个 gap 的总宽：3 × 1vmin ÷ 4 */
}⚠️ 注意：gap: 1vmin 在一行中会产生 n−1 个间隙（4 项 → 3 个间隙），因此需将总 gap 均摊到每个项的宽度中。更严谨的写法是：
.video-container .video {
width: calc((100% - 3vmin) / 4); /* 推荐：语义清晰，避免 magic number */
}若需支持动态列数（如小屏 2 列、中屏 3 列、大屏 4 列），可配合媒体查询：
立即学习“前端免费学习笔记（深入）”；
/* 默认：最多 2 列 */
.video-container .video {
width: calc((100% - 1vmin) / 2);
}
@media (min-width: 768px) {
/* 中屏：最多 3 列 */
.video-container .video {
width: calc((100% - 2vmin) / 3);
}
}
@media (min-width: 1024px) {
/* 大屏：最多 4 列 */
.video-container .video {
width: calc((100% - 3vmin) / 4);
}
}? 保持 16:9 比例与防溢出
由于图片本身是 16:9，只需确保容器 .video 也维持该比例，即可天然避免变形。推荐使用 aspect-ratio: 16/9（现代浏览器支持）或伪元素占位法（兼容旧版）：
.video {
position: relative;
width: calc((100% - 3vmin) / 4);
aspect-ratio: 16/9; /* ✅ 推荐：简洁可靠 */
overflow: hidden;
}
.video > * {
width: 100%;
height: 100%;
object-fit: cover; /* 确保图像填满且不拉伸 */
}? 提示：aspect-ratio 已获 Chrome 88+、Firefox 89+、Safari 15.4+ 全面支持。如需兼容 Safari 15.3 及更早版本，可用 ::before + padding-top: 56.25% 技巧模拟。
? 完整关键 CSS 片段（含容器高度约束）
为确保整个画廊严格限制在父容器剩余高度内（防止大量图片导致纵向溢出），需对 .video-container 启用 overflow: auto 或 scroll，并确保其 flex: 1 正确生效：
.container {
display: flex;
flex-direction: column;
height: 90vh; /* 明确容器高度 */
padding: 10px;
gap: 2vmin;
box-sizing: border-box;
}
.video-container {
flex: 1; /* 占满剩余空间 */
display: flex;
flex-wrap: wrap;
gap: 1vmin;
align-content: flex-start; /* 避免底部对齐导致顶部留空 */
justify-content: flex-start;
overflow-y: auto; /* 内容超限时允许滚动，而非溢出 */
padding: 2px; /* 防止滚动条遮挡最末项（可选） */
}✅ 总结：为什么这比 Flex + flex: 1 更优？
| 方案 | 是否等宽 | 是否防溢出 | 是否响应式 | 是否需 JS |
|---|---|---|---|---|
| flex: 1 + flex-wrap | ❌（末行拉伸） | ❌（无高度约束） | ⚠️（列数固定） | ❌ |
| width: calc() + flex-wrap | ✅（显式宽度） | ✅（配合 flex: 1 + overflow） | ✅（媒体查询驱动） | ❌ |
最终效果：无论图片数量是 5 张还是 50 张，画廊均会按当前断点自动选择最优列数，所有缩略图严格等比、等尺寸、16:9，且绝不突破容器边界——纯 CSS，零 JS，高性能，易维护。
