使用Flexbox可高效创建响应式图片画廊。1. 建立包含多个.item子项的.gallery容器；2. 设置display: flex与flex-wrap: wrap，实现项目自动换行并用gap控制间距；3. 通过flex: 1 1 250px等设置让项目可伸缩，适配不同屏幕；4. 结合媒体查询，在768px和480px断点下调整item尺寸，实现多设备兼容布局。
使用Flexbox制作响应式网格布局是一种高效且灵活的方法，特别适合构建图片画廊（gallery）。通过结合 flex-wrap 和 flex 属性，可以让项目在不同屏幕尺寸下自动换行并均匀分布，无需依赖浮动或定位。
1. 基础结构：设置容器和项目
首先创建一个包含多个子项的容器，每个子项代表画廊中的一个图块。
<div class="gallery"> <div class="item"><img src="image1.jpg" alt=""></div> <div class="item"><img src="image2.jpg" alt=""></div> <div class="item"><img src="image3.jpg" alt=""></div> <div class="item"><img src="image4.jpg" alt=""></div> <div class="item"><img src="image5.jpg" alt=""></div> <div class="item"><img src="image6.jpg" alt=""></div> </div>
2. 使用 flex-wrap 允许换行
给容器设置 display: flex 并启用 flex-wrap: wrap，使子项目在空间不足时自动换到下一行。
关键点：
立即学习“前端免费学习笔记（深入）”；
- flex-wrap: wrap 是实现多行网格的关键
- 避免水平溢出，提升移动端体验
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 项目之间的间距 */
padding: 10px;
}
3. 使用 flex 属性控制项目尺寸
通过 flex 缩写属性（flex-grow, flex-shrink, flex-basis）动态分配空间。例如，让每个项目默认占据约 30% 宽度，在小屏幕上自动缩小并换行。
常用配置：
- flex: 1 1 300px → 最小宽度约300px，可伸缩
- flex: 0 0 200px → 固定宽度200px，不伸缩
.item {
flex: 1 1 250px; /* 可伸缩，基础宽度250px */
height: 200px;
overflow: hidden;
}
<p>.item img {
width: 100%;
height: 100%;
object-fit: cover;
}</p>4. 响应式优化建议
虽然 Flexbox 本身具有响应性，但可以进一步结合媒体查询微调表现。
- 大屏：每行显示4-5项
- 平板：每行3项
- 手机：每行1-2项
示例：
@media (max-width: 768px) {
.item {
flex: 1 1 200px;
}
}
<p>@media (max-width: 480px) {
.item {
flex: 1 1 100%; /<em> 单列堆叠 </em>/
}
}</p>基本上就这些。利用 flex-wrap 和 flex 的组合，你可以快速搭建一个无需JavaScript、兼容性好、自适应强的响应式画廊布局。关键是合理设置 flex-basis 和断点，让内容自然流动。不复杂但容易忽略细节。
