答案：通过设置flex容器的flex-wrap和gap属性，结合flex: 1 1 200px控制子项弹性，配合媒体查询实现响应式图片列表布局。
用CSS Flexbox实现响应式图片列表，关键在于灵活控制容器的伸缩性与子元素的自适应能力。通过合理设置display: flex及相关属性，可以轻松让图片在不同屏幕尺寸下自动调整布局，无需依赖浮动或定位。
1. 基础Flex容器设置
.image-list {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 10px; /* 图片间距 */
padding: 10px;
}
flex-wrap: wrap是响应式的关键，当空间不足时，图片会自动折行排列。gap提供统一间距，比margin更简洁。
2. 控制图片项的弹性行为
每个图片项应能根据容器宽度自动调整尺寸：
立即学习“前端免费学习笔记（深入）”；
.image-item {
flex: 1 1 200px; /* grow shrink basis */
max-width: 100%;
}
.image-item img {
width: 100%;
height: auto;
border-radius: 8px;
object-fit: cover;
}
flex-basis: 200px设定最小宽度，flex-grow: 1允许拉伸填空隙，flex-shrink: 1允许压缩避免溢出。图片设为width: 100%确保充满父项并保持比例。
3. 针对不同屏幕优化断点
使用媒体查询微调大屏或小屏下的表现：
@media (max-width: 600px) {
.image-list {
gap: 8px;
}
.image-item {
flex-basis: calc(50% - 8px); /* 两列布局 */
}
}
@media (min-width: 900px) {
.image-item {
flex-basis: 280px; / 固定宽度更适合大图展示 /
}
}
小屏强制两列，大屏保留弹性拉伸。结合calc()精确计算可用空间，避免换行错乱。
4. 对齐与间距优化
让列表视觉更整齐：
-
justify-content: space-between或space-around分布主轴空间 -
align-items: center垂直居中图片（若高度不一致） - 配合
margin: auto可居中单个图片项
注意：如果使用space-between，最后一行可能间距不均，此时改用gap更可控。
基本上就这些。Flexbox让响应式图片列表变得直观又高效，核心是理解flex三值与flex-wrap的协作方式。搭配媒体查询，适配移动端和桌面端毫无压力。
