使用css flexbox可轻松创建响应式图片画廊，通过display: flex和flex-wrap实现自动换行与等比缩放，结合gap设置间距，flex属性控制最小宽度（如200px）并允许伸缩，配合媒体查询优化小屏显示（如600px以下设为150px），确保在不同设备上均具有良好视觉效果。
使用 CSS Flexbox 实现弹性图片画廊非常简单，能自动适应不同屏幕尺寸，无需额外的 javaScript。下面是一个实用且响应式的图片画廊实现方法。
基本 html 结构
每个图片用一个 <img> 标签包裹在容器中，便于样式控制：
<div class=”gallery”>
<img src=”image1.jpg” alt=”Image 1″>
<img src=”image2.jpg” alt=”Image 2″>
<img src=”image3.jpg” alt=”Image 3″>
<img src=”image4.jpg” alt=”Image 4″>
<img src=”image5.jpg” alt=”Image 5″>
<img src=”image6.jpg” alt=”Image 6″>
</div>
CSS Flexbox 样式设置
使用 Flexbox 让图片自动换行并等比缩放：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
}
.gallery img {
flex: 1 1 200px; /* 最小宽度 200px，可伸缩 */
height: auto;
border-radius: 8px;
transition: transform 0.2s ease;
}
.gallery img:hover {
transform: scale(1.05);
}
说明：
立即学习“前端免费学习笔记（深入）”；
- display: flex 启用弹性布局
- flex-wrap: wrap 允许图片换行显示
- gap: 10px 设置图片间距
- flex: 1 1 200px 表示每张图最小宽度为 200px，空间充足时可扩展，空间不足时自动换行
- height: auto 保持图片原始宽高比
响应式优化
在小屏幕上进一步优化显示效果，可添加媒体查询：
@media (max-width: 600px) {
.gallery {
gap: 8px;
padding: 5px;
}
.gallery img {
flex: 1 1 150px;
}
}
这样在手机上也能良好显示，图片不会过于拥挤。
实际效果与建议
这种布局适用于作品集、相册、商品展示等场景。建议图片预先统一尺寸比例（如都用 4:3 或 1:1），视觉更整齐。也可给图片外层加 <div class=”gallery-item”> 用于阴影或边框增强美观。
基本上就这些，不复杂但容易忽略细节。灵活运用 flex 属性和 gap，就能做出流畅自然的弹性画廊。