CSS 实现响应式等比缩放画廊：Flexbox 容器内自动适配行列数且不溢出_技术教程

本文介绍如何仅用纯 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）	✅（媒体查询驱动）	❌