使用 Flexbox 实现响应式网格布局需设置容器 display: flex 和 flex-wrap: wrap，通过 flex-basis 控制子项宽度并结合媒体查询调整列数，如大屏四列、平板两列、手机单列，配合 margin 或 padding 优化间距，justify-content 调整对齐方式，实现不同设备下的自适应布局。
使用 Flexbox 实现响应式网格布局，关键在于结合 flex 属性、flex-wrap 和媒体查询，让子元素在不同屏幕尺寸下自动换行并调整宽度。以下是具体实现方法。
基本结构与容器设置
先定义一个 flex 容器，并允许子项换行：
.container {display: flex;
flex-wrap: wrap;
}
这样子元素超出容器宽度时会自动换行，是实现响应式的基础。
设置网格项的灵活宽度
通过设置子项的 flex 或 flex-basis 控制每列的宽度。例如创建一个四列布局：
立即学习“前端免费学习笔记（深入）”；
.item {flex: 1 1 22%;
margin: 1.5%;
}
解释：
- flex: 1 1 22% 表示子项可伸缩，基础宽度为 22%，留出 margin 空隙。
- margin 提供间距，避免贴边。
配合媒体查询适配不同设备
在小屏幕上调整子项宽度，使其变为单列或双列：
@media (max-width: 768px) {
.item {
flex-basis: 46%;
}
}
@media (max-width: 480px) {
.item {
flex-basis: 100%;
}
}
这样在手机上每行显示一列，平板上两列，桌面端四列，实现响应式效果。
对齐与间距优化
可以使用 justify-content 控制主轴对齐方式，比如居中或均匀分布：
.container {display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
若使用 space-between，注意首尾项对齐边缘，此时建议用 padding 而非 margin 做外边距控制。
基本上就这些。用 Flexbox 做响应式网格不复杂但容易忽略细节，关键是合理设置 flex-basis 和 flex-wrap，再配合媒体查询动态调整列数。适合简单布局，若需更复杂网格推荐搭配 CSS Grid。
