本文介绍如何使用纯 css（flexbox + calc）构建一个自适应画廊，使 16:9 图像在固定容器内等比缩放、均匀分布、不溢出且自动换行，无需 javascript。

实现一个真正响应式的图像画廊——既要保持宽高比（如 16:9），又要填满可用空间、不溢出容器、所有子项尺寸一致、自动适配不同数量和屏幕尺寸——是前端布局中的经典挑战。虽然 Flexbox 天然适合流式排列，但默认 flex: 1 或 flex-basis 容易导致最后一行高度不均或整体超界（尤其当项目数不能被列数整除时）。关键在于放弃弹性伸缩，转而用精确的宽度控制 + gap 补偿，让每个项目获得一致的计算宽度。

✅ 正确方案：width: calc() + flex-wrap

核心思路是：

• 移除 .video 上的 flex: 1（它会强制拉伸并破坏一致性）；
• 改用 width: calc(N% - G)，其中 N 是理想列数对应的百分比宽度（如 4 列 → 25%），G 是单侧 gap 占比（因 gap 在相邻项目间生效，每列需减去 一个 gap）；
• 配合 flex-wrap: wrap 和 justify-content: flex-start（推荐，避免居中导致末行间隙异常）。

例如，目标为最多 4 列：

.video-container .video {
  width: calc(25% - 1vmin); /* 25% 宽度减去 1vmin gap */
}

? 1vmin 是动态单位（视口短边的 1%），确保 gap 在任意设备上协调缩放。若使用固定像素（如 8px），需搭配媒体查询做断点适配。

? 完整可运行示例

  
Gallery Header
  Body text — gallery occupies remaining space.
  
    
    @@##@@
    
  

.container {
  display: flex;
  flex-direction: column;
  gap: 2vmin;
  padding: 10px;
  box-sizing: border-box;
  height: 90vh; /* 确保有明确高度约束 */
}

.video-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1vmin;
  justify-content: flex-start; /* 避免居中引发的末行对齐问题 */
  align-content: flex-start;   /* 同样重要：防止底部留白或挤压 */
}

.video-container .video {
  width: calc(25% - 1vmin); /* 四列布局 */
  /* 若需三列：calc(33.333% - 1vmin)；五列：calc(20% - 1vmin) */
}

.video-container .video > * {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* 更现代、更可靠的宽高比控制（推荐替代 img 的 width/height 属性） */
  object-fit: cover; /* 保持比例并填充区域 */
}

⚠️ 注意事项与进阶建议

• aspect-ratio 是关键增强：现代浏览器支持 aspect-ratio: 16/9，比依赖 的 width/height 属性更健壮（即使图片加载失败也维持布局）；旧版可回退为 padding-top: 56.25% + position: relative 技巧。
• align-content: flex-start 必须设置：否则 flex-end 或 stretch 会导致空行撑高容器或末行错位。
• 列数选择策略：calc(25% - 1vmin) 适合大多数桌面场景；移动端建议用媒体查询切换为 calc(50% - 1vmin)（双列）或 calc(100% - 1vmin)（单列）。
• Grid 替代方案？ CSS Grid 确实更直观（如 grid-template-columns: repeat(auto-fill, minmax(...)))），但本需求强调 等比缩放至填满容器高度，Grid 的 fr 单位难以直接约束行高；而 Flexbox + calc 组合在宽度维度精准可控，配合 flex: 1 容器高度约束，反而是更简洁可靠的解法。
• 性能提示：纯 CSS 方案无 JS 计算开销，渲染性能更优，且天然支持服务端渲染（SSR）和无障碍语义。

最终效果：无论容器尺寸如何变化、图像数量多少，所有缩略图始终等宽等高、严格保持 16:9 比例、无缝换行、不溢出边界——真正实现“所见即所得”的响应式画廊。