本文介绍如何使用纯 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 比例、无缝换行、不溢出边界——真正实现“所见即所得”的响应式画廊。
立即学习“前端免费学习笔记（深入）”；
