本文介绍如何仅用纯 css（flexbox）构建一个 16:9 图片画廊，使其在固定容器内自动计算项目尺寸、保持宽高比、均匀换行且不溢出，无需 javascript。
实现一个真正响应式的图片画廊，关键在于放弃 flex: 1 这类弹性伸缩行为——它会导致最后一行子项被强制拉伸以填满剩余空间（即“底行膨胀”问题），破坏视觉一致性。正确思路是：将 .video 项设为固定百分比宽度 + 精确减去间隙（gap），使其严格按列数控制布局，同时依靠 width: 100%; height: auto 保证内部图片按 16:9 比例等比缩放。
✅ 推荐方案：calc() + flex-wrap
将 .video-container .video 的宽度设为 calc(N% - gap)，其中 N = 100 / 列数。例如希望最多 4 列（兼顾小屏与大屏的通用性），则：
.video-container .video {
width: calc(25% - 1vmin); /* 4列：100%/4 = 25%，减去1个横向gap */
}⚠️ 注意：gap: 1vmin 是双向生效的，但 calc() 中只需减去一个 gap 值（不是 2vmin），因为相邻两项之间只共享一个间隙；flex-wrap 下，每行首尾无额外 gap，因此 25% - 1vmin 已精确预留了 4 项 + 3 个间隙的总宽度（4×25% − 3×1vmin ≈ 100% − 3vmin，实际由 flex 容器自动对齐）。
? 完整可运行示例（含结构优化）
<div class="container">
<h1>Gallery Header</h1>
<p>This text occupies variable space. Gallery fills the rest.</p>
<div class="video-container">
<!-- 15× <div class="video"><img ...></div> -->
</div>
</div>.container {
display: flex;
flex-direction: column;
gap: 2vmin;
padding: 10px;
box-sizing: border-box;
/* 容器高度由上下文决定（如 vh 或 flex: 1） */
}
.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); /* 固定4列布局 */
/* 可选：添加 min-width 防止过小（如 min-width: 180px） */
}
.video-container .video > * {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9; /* 更现代、更可靠的宽高比控制（推荐） */
object-fit: cover; /* 可选：裁剪填充，避免拉伸变形 */
}? 核心要点总结
- 禁用 flex: 1：它会破坏尺寸一致性，改用 width: calc() 显式控制列宽；
- align-content: flex-start：替代 flex-end，防止 Flex 容器在多行时拉伸末行；
- aspect-ratio: 16/9：比 height: auto 更可靠地维持比例（现代浏览器支持良好，CanIUse: aspect-ratio）；
-
响应式列数进阶：如需根据屏幕宽度动态调整列数（如 1列→2列→4列），可结合媒体查询：
@media (min-width: 768px) { .video-container .video { width: calc(50% - 1vmin); } } @media (min-width: 1024px) { .video-container .video { width: calc(25% - 1vmin); } } - 替代方案提示：CSS Grid 在此场景下同样优秀（grid-template-columns: repeat(auto-fill, minmax(...)))），但 Flexbox 方案更轻量、兼容性更好（IE11+ 基础支持），且逻辑更直观。
最终效果：无论图片数量是 3 张还是 40 张，所有缩略图始终保持相同尺寸与 16:9 比例，自动换行，严格约束在容器边界内，完美契合响应式设计需求。
立即学习“前端免费学习笔记（深入）”；
