使用 Flexbox 的 gap 和 flex-wrap 可实现响应式列表布局，gap 统一控制项目间距，避免 margin 问题，flex-wrap 允许项目自动换行，结合 justify-content 优化对齐，通过媒体查询在不同断点调整 gap 值，适配多设备显示，提升布局灵活性与美观性。
在响应式设计中，列表项之间的间距控制是个常见需求。使用 Flexbox 的 gap 和 flex-wrap 组合，可以轻松实现无论屏幕大小如何变化，布局都整齐美观的效果。
使用 gap 统一间距
gap 属性用于设置 flex 容器中子元素之间的间距，它能同时控制行与列的间隔，避免传统 margin 带来的边缘多余空白问题。
例如：给一个 flex 容器设置 gap: 16px; 后，所有项目之间都会保持 16px 的水平和垂直间距，无需额外处理 margin 重叠或首尾空隙。
结合 flex-wrap 实现换行
当容器宽度不足时，让项目自动换行是关键。设置 flex-wrap: wrap; 可使项目在空间不够时自动折行显示。
立即学习“前端免费学习笔记（深入）”；
配合 justify-content 控制每行的对齐方式，比如居左、居中或两端对齐，视觉更整洁。
- 容器宽度缩小后，项目自动换行，间距仍由 gap 保证
- 无需媒体查询也能维持良好结构
- 特别适合卡片列表、标签组、产品展示等场景
响应式断点下的灵活调整
虽然 gap 在大多数现代浏览器中已支持，但你可以在不同屏幕下调整 gap 大小，提升体验。
通过媒体查询动态改变 gap 值：
- 大屏用 gap: 24px;
- 平板用 gap: 16px;
- 手机用 gap: 12px;
这样既能保证空间利用率，又不会让小屏显得拥挤。
基本上就这些。用好 gap 和 flex-wrap，再搭配响应式单位（如 rem 或 %），就能实现简洁高效的响应式列表布局。不复杂但容易忽略细节。
