CSSFlexbox打造响应式图片画廊布局

一分耕耘，一分收获！既然打开了这篇文章《CSS Flexbox 实现响应式图片画廊布局》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

本文介绍如何仅用纯 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 比例，自动换行，严格约束在容器边界内，完美契合响应式设计需求。

好了，本文到此结束，带大家了解了《CSSFlexbox打造响应式图片画廊布局》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！