答案是使用CSS Flexbox可通过设置flex容器和子项属性实现响应式网格。首先设display: flex和flex-wrap: wrap，用flex-basis控制列宽如25%实现四列，结合gap设置间距；再通过媒体查询在768px以下改为50%，480px以下改为100%，实现多设备适配；最后用justify-content和align-items控制对齐，使布局美观自适应。
使用 CSS Flexbox 实现响应式网格是一种灵活且高效的方法，无需依赖浮动或定位。通过合理设置容器和子项的属性，可以轻松适配不同屏幕尺寸。
1. 基础 Flex 容器设置
要创建一个网格布局，先将父容器设为 flex 模式，并控制换行：
.grid-container {
display: flex;
flex-wrap: wrap; /* 允许子项换行 */
gap: 16px; /* 子项之间的间距（现代浏览器支持） */
}
这个容器会把所有子项排成一行，超出后自动换行，形成网格结构。
2. 设置子项宽度实现列数控制
通过设置子项的 flex-basis 或 width 来控制每行列数：
立即学习“前端免费学习笔记（深入）”；
- 两列布局：
flex-basis: 50%; - 三列布局：
flex-basis: 33.33%; - 四列布局：
flex-basis: 25%;
.grid-item {
flex: 1 1 25%; /* grow | shrink | basis */
max-width: 25%;
}
这样在大屏幕上每行最多显示4个，小屏则自动减少数量。
3. 使用媒体查询优化响应式行为
根据不同设备调整子项宽度，提升移动端体验：
@media (max-width: 768px) {
.grid-item {
flex: 1 1 50%;
max-width: 50%;
}
}
@media (max-width: 480px) {
.grid-item {
flex: 1 1 100%;
max-width: 100%;
}
}
在手机上变为单列，在平板上为双列，桌面端为四列，自然适应屏幕变化。
4. 对齐与间距处理
确保内容居中、对齐美观：
-
justify-content：控制主轴对齐方式，如
space-between或center -
align-items：控制交叉轴对齐，如
stretch让子项等高 - gap 属性简化间距管理，替代外边距计算
.grid-container {
justify-content: center;
align-items: stretch;
}
基本上就这些。用 Flexbox 做响应式网格不复杂但容易忽略细节，关键是结合 flex-wrap、flex-basis 和媒体查询动态调整布局。兼容性好，适合大多数现代项目。
