使用flex-wrap和flex-basis结合媒体查询可实现响应式网格布局：通过flex-wrap: wrap启用换行，flex-basis设置项目初始宽度如25%、33.33%，配合calc()减去gap或margin避免溢出，再用媒体查询在不同屏幕下调整为50%或100%等，实现多设备适配，结构清晰且无需第三方框架。
使用Flexbox制作响应式网格布局，关键在于灵活控制子元素的换行与基础尺寸。flex-wrap 与 flex-basis 的结合能让容器内的项目在不同屏幕尺寸下自动调整排列方式，实现真正响应式的网格效果。
启用换行：flex-wrap
默认情况下，Flex容器中的项目会排在一行（或一列）中。为了实现网格换行，需要将容器设置为可换行：
flex-wrap: wrap;这样当子元素超出容器宽度时，它们会自动折到下一行，而不是被压缩或溢出。配合 display: flex 使用，就能形成多行网格结构。
设置项目基础宽度：flex-basis
flex-basis 决定每个项目在主轴上的初始大小。结合百分比值，可以创建等分网格：
立即学习“前端免费学习笔记（深入）”；
- 若希望每行显示4个项目，可设 flex-basis: 25%;
- 3个项目则用 flex-basis: 33.33%;
- 2个项目用 flex-basis: 50%;
注意：需减去 margin 或 gap 所占空间，避免因超出100%导致意外换行。例如：
flex-basis: calc(25% - 20px);再配合 margin: 10px; 实现间距控制。
响应式适配：结合媒体查询
通过媒体查询动态调整 flex-basis 值，让网格在不同设备上表现更佳：
@media (max-width: 768px) {.item { flex-basis: 50%; }
}@media (max-width: 480px) {
.item { flex-basis: 100%; }
}
这样在平板上两列显示，手机上变为单列堆叠，视觉更清晰。
完整示例代码
HTML结构：
1
2
3
4
CSS样式：
.grid-container {display: flex;
flex-wrap: wrap;
gap: 16px;
}.item {
flex: 0 0 calc(25% - 16px);
background: #eee;
padding: 20px;
text-align: center;
}@media (max-width: 768px) {
.item { flex: 0 0 calc(50% - 16px); }
}@media (max-width: 480px) {
.item { flex: 0 0 100%; }
}
这里使用 flex: 0 0 flex-basis 禁止项目伸缩，确保网格列宽严格按设定比例分布。
基本上就这些。合理运用 flex-wrap 和 flex-basis，再配合媒体查询，就能快速搭建出简洁高效的响应式网格布局，无需依赖外部框架。不复杂但容易忽略细节，比如 gap 对布局的影响，记得用 calc 处理好间距问题。
