本文介绍如何仅用 css（无需 javascript）构建一个能自动根据容器宽高比例缩放、均匀排列 16:9 图像的 flexbox 画廊，确保内容不溢出、行列高度一致且完全响应式。
实现一个「智能缩放」的图片画廊——即所有 16:9 缩略图在给定容器内自动调整尺寸、均匀换行、不拉伸不变形、不溢出容器——是前端开发中的经典挑战。虽然 Flexbox 常被用于一维布局，但结合 flex-wrap 与精确的宽度计算，它完全可以胜任二维网格式响应画廊任务，无需 JS，也无需切换到 Grid（尽管 Grid 在某些场景更直观，但本方案兼容性更广，支持 Safari 10.1+ 等旧版浏览器）。
关键问题在于原代码中 .video-container .video { flex: 1 } 的滥用：flex: 1 会强制子项在剩余空间内拉伸，导致最后一行因“填不满整行”而被额外分配空间，从而高度突兀增长（如提问中截图所示）。解决思路是放弃弹性拉伸，改用确定性宽度 + 自动换行：
✅ 正确做法：为每个 .video 设置 width: calc(N% - gap)，其中 N 表示每行期望列数（如 4 列 → 25%），减去对应数量的 gap 值（如 4 列间有 3 个间隙，但为简化统一用 1vmin 间距，可近似按 calc(25% - 1vmin) 计算；更严谨时可用 calc((100% - 3 * 1vmin) / 4)，但 calc(25% - 1vmin) 在多数场景已足够稳定）。
以下是精简、可复用的核心 CSS 片段：
立即学习“前端免费学习笔记（深入）”；
.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); /* 四列布局：25% 宽度 - 1 份 gap */
/* 若需三列：calc(33.333% - 1vmin)；五列：calc(20% - 1vmin) */
}
.video-container .video > * {
width: 100%;
height: auto;
aspect-ratio: 16/9; /* 推荐：现代 CSS，强制 16:9 比例（可选，兼容性见下文） */
object-fit: cover; /* 可选：裁切填充，避免留白 */
}⚠️ 注意事项：
- align-content: flex-start 替代 flex-end：原题中使用 flex-end 会导致所有行向上“堆积”至容器底部，当内容不足一屏时，画廊悬浮于顶部下方空白区域；设为 flex-start 可让内容自然从上往下流式填充，视觉更合理。
- justify-content: flex-start：避免 center 导致末行左右空隙不均，尤其在列数不能整除时。
- aspect-ratio 兼容性：若需支持 Safari 12.1–15.3 或 Firefox 绝对定位子元素），但现代项目推荐直接使用 aspect-ratio: 16/9（CanIUse 数据 显示全局支持率 >95%）。
-
响应式列数进阶：如需随屏幕宽度动态切换列数（如移动端 2 列、桌面端 4 列），可配合媒体查询：
@media (max-width: 768px) { .video-container .video { width: calc(50% - 1vmin); } } @media (min-width: 769px) { .video-container .video { width: calc(25% - 1vmin); } }
总结：Flexbox 画廊的核心不是“让子项自适应”，而是让父容器通过 flex-wrap 提供换行能力，再用 calc() 精确控制子项宽度以预留间隙。这既规避了 flex: 1 的不可控拉伸，又保留了 Flexbox 的流式特性与良好兼容性。只要图像本身保持 16:9 比例（或通过 aspect-ratio 强制），就能实现真正“比例缩放、无缝填充、不溢出、不畸变”的专业级画廊效果。
