使用 flex-wrap 和 gap 实现响应式图片画廊：设置容器 display: flex、flex-wrap: wrap 和 gap 控制间距，项目设 flex: 1 1 200px，图片 width: 100% height: auto，适配多设备。
要在CSS中实现一个响应式的Flexbox图片画廊，关键是使用 flex-wrap 和 gap 属性来创建多列排列，并确保容器能自动换行。这种方法无需额外的媒体查询就能适应不同屏幕尺寸。
设置容器为Flex并启用换行
将图片容器设置为 display: flex，并添加 flex-wrap: wrap，这样子元素（图片）在空间不足时会自动换行到下一行。
• 使用display: flex 启用弹性布局• 添加
flex-wrap: wrap 允许项目换行• 容器宽度设为100%，充分利用父级空间
利用gap控制图片间距
CSS的 gap 属性可以轻松设置项目之间的间距，无需额外的margin计算。它适用于行与列之间的间隔。
• 设置gap: 10px 统一控制横向和纵向间距• 可分别使用
row-gap 和 column-gap 精细调整• 避免外边距折叠问题，比传统margin更直观
定义图片的灵活宽度
为了让图片在不同列数间自适应，可以设置每个图片项的 flex 属性或固定基础宽度。
立即学习“前端免费学习笔记（深入）”；
• 使用flex: 1 1 200px 表示最小宽度200px，可伸缩• 或设
min-width: 150px 配合 max-width: 100% 控制尺寸• 图片本身应设置
width: 100% 和 height: auto 保持比例完整示例代码
以下是简洁实用的HTML与CSS结构：
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
}
<p>.item {
flex: 1 1 200px; /<em> 最小200px，可扩展 </em>/
max-width: 100%;
}</p><p>.item img {
width: 100%;
height: auto;
display: block;
}</p>基本上就这些。通过合理组合 flex-wrap 和 gap，你可以快速构建一个整洁、响应式的图片画廊，适配手机到桌面各种设备。不复杂但容易忽略细节，比如图片的宽高比和容器内边距处理。
