使用 Flexbox 的 flex-wrap 和 Media Query 可实现响应式多行布局，通过设置容器 display: flex、flex-wrap: wrap 及 gap 间距，结合不同屏幕断点调整 item 的 flex 值，使项目在手机、平板、桌面等设备上分别显示 1、2、3~4 列，适用于卡片、产品列表等场景。
要实现多行排列并根据不同屏幕尺寸调整布局，可以结合 CSS Flexbox 和 Media Query。这种方式灵活、响应式强，适合现代网页设计。
使用 Flexbox 实现多行排列
通过 flex-wrap: wrap 允许 flex 项目在空间不足时换行，形成多行布局。
基本结构如下：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 项目之间的间距 */
}
.item {
flex: 1 1 200px; / 可扩展、可收缩，最小宽度约200px /
}
说明：
立即学习“前端免费学习笔记（深入）”；
- display: flex 启用弹性布局
- flex-wrap: wrap 允许子元素换行
- flex: 1 1 200px 表示每个项目最小宽度为 200px，可根据容器伸缩
- gap 设置项目之间的间距，更简洁于使用 margin
使用 Media Query 调整不同屏幕下的排列
在不同设备上控制每行显示的项目数量，可通过 media query 调整 flex-basis 或容器样式。
/* 小屏幕（手机） - 每行1个 */
@media (max-width: 480px) {
.item {
flex: 1 1 100%;
}
}
/ 平板 - 每行2个 /
@media (min-width: 481px) and (max-width: 768px) {
.item {
flex: 1 1 calc(50% - 8px);
}
}
/ 桌面 - 每行3~4个 /
@media (min-width: 769px) {
.item {
flex: 1 1 calc(33.333% - 12px);
}
}
提示：
- 使用 calc() 扣除 gap 带来的间距影响
- 可以根据设计需求调整断点值（如 768px、992px）
- 配合 justify-content 控制主轴对齐方式，如 space-between、center
实际应用场景示例
常用于产品列表、卡片网格、相册展示等需要响应式多行排列的场景。
例如一个三列卡片布局：
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.card {
flex: 1 1 calc(33.333% - 20px);
background: #f0f0f0;
padding: 20px;
border-radius: 8px;
}
@media (max-width: 768px) {
.card {
flex: 1 1 calc(50% - 10px);
}
}
@media (max-width: 480px) {
.card {
flex: 1 1 100%;
}
}
基本上就这些。关键是利用 flex 的弹性与 wrap 换行特性，再通过 media query 控制不同设备下的显示效果。不复杂但容易忽略细节，比如 gap 和 calc 的配合使用。
