使用CSS Flexbox实现多列响应式布局需设置父容器display: flex并配合flex-wrap和gap，通过flex: 1 1最小宽度控制子项弹性，结合媒体查询调整不同屏幕下的列数，利用calc()精确计算宽度，再用justify-content和align-items优化对齐，适用于卡片、产品等网格布局。
使用 CSS Flexbox 实现多列响应式布局，关键是通过灵活的容器设置和媒体查询，让子元素在不同屏幕尺寸下自动调整排列方式。下面介绍具体实现方法。
1. 基础 Flex 容器设置
将父容器设为 display: flex，并控制子项的换行和间距：
container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 列间距 */
}
.item {
flex: 1 1 200px; /* 弹性增长、收缩，最小宽度约200px */
}
flex-wrap: wrap 允许子项在空间不足时换行，flex: 1 1 200px 表示每个子项可以伸缩，但最小宽度为 200px，这样能自动适应容器宽度。
2. 控制每行显示列数
如果你想更精确地控制每行显示几列（比如桌面端3列，平板2列，手机1列），可以通过设置子项的 flex-basis 配合媒体查询：
立即学习“前端免费学习笔记（深入）”；
.item {
flex: 1 1 calc(33.333% - 16px); /* 每行最多3列 */
}
@media (max-width: 768px) {
.item {
flex: 1 1 calc(50% - 12px); /* 平板：2列 */
}
}
@media (max-width: 480px) {
.item {
flex: 1 1 100%; /* 手机：单列 */
}
}
利用 calc() 减去 margin 或 gap 的空间，避免换行错乱。
3. 对齐与间距优化
使用 justify-content 和 align-items 让布局更整齐：
container {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 左右对齐，间隙均匀 */
align-items: stretch; /* 子项高度一致 */
gap: 16px;
}
注意：如果用了 gap，space-between 可能会导致边缘不对齐，建议优先使用 gap 控制间距。
4. 实际应用场景示例
常见于卡片列表、产品展示或博客文章网格：
<div class="grid">
<div class="card">内容1</div>
<div class="card">内容2</div>
<div class="card">内容3</div>
</div>
.grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px;
background: #f4f4f4;
padding: 16px;
border-radius: 8px;
}
在小屏设备上自动变为单列，在大屏上最多每行3~4列，无需 JavaScript。
基本上就这些。Flexbox 的弹性特性让它非常适合构建响应式多列布局，配合 media query 能轻松适配各种设备。关键在于合理设置 flex 属性和断点，保持布局自然流动。不复杂但容易忽略细节。
