瀑布流布局通过Flexbox的flex-wrap: wrap实现多列换行，结合百分比宽度与媒体查询适配不同屏幕：大屏每行4列（width: 23%+margin）、平板3列（width: 31%）、手机1-2列，形成响应式等宽错落布局。
瀑布流布局是一种常见的网页设计模式，适合展示图片、卡片等内容，尤其在画廊、电商或社交平台中应用广泛。使用 Flexbox 结合媒体查询，可以轻松实现响应式的瀑布流效果，让列宽随屏幕尺寸自适应调整。
基本原理：利用 Flexbox 的换行特性
Flexbox 默认按主轴方向排列子元素，通过设置容器的 flex-wrap: wrap，可以让子项在空间不足时自动换行。只要控制每个子项的宽度，就能形成多列等宽的布局，看起来像瀑布流。
注意：这里的“瀑布流”是等高错落的多列布局，不是每列高度动态不一的 Masonry 布局。若需真正的高度不规则瀑布流，还需 JavaScript 配合，但本文聚焦于纯 CSS 实现的类瀑布流视觉效果。
- 父容器设置为 display: flex 和 flex-wrap: wrap
- 每个子项设置固定百分比宽度（如 30%），并加上 margin 用于间距
- 子项内容可包含图片或卡片，高度可变，形成错落感
设置列宽与响应式断点
通过媒体查询，在不同屏幕尺寸下调整子项的宽度，从而控制每行显示的列数。例如：大屏显示 4 列，平板显示 3 列，手机显示 1 或 2 列。
立即学习“前端免费学习笔记（深入）”；
关键在于合理计算子项宽度，避免因四舍五入导致最后一项换行异常。
- 桌面端（≥1024px）：子项设为 width: 23%，左右 margin 各 1%，总占 25%，一行刚好 4 列
- 平板（768px ~ 1023px）：设为 width: 31%，实现 3 列布局
- 手机（width: 48% 或 100%，显示 2 列或单列
CSS 示例代码
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
.item {
width: calc(25% - 12px);
margin-bottom: 16px;
background: #f0f0f0;
border-radius: 8px;
overflow: hidden;
}
/ 平板 /
@media (max-width: 1023px) {
.item {
width: calc(33.333% - 12px);
}
}
/ 手机 /
@media (max-width: 767px) {
.item {
width: calc(50% - 12px);
}
}
/ 超小屏，单列 /
@media (max-width: 480px) {
.item {
width: 100%;
}
}
使用 calc() 精确计算宽度，减去 margin 或 gap 占用的空间，确保每行刚好容纳目标列数。配合 gap 属性统一管理间距，比 margin 更简洁。
优化建议与注意事项
这种基于 Flexbox 的方案简单高效，适合大多数场景，但需注意以下几点：
- 子项高度不一致是形成“瀑布感”的关键，内容结构应允许自然高度变化
- 避免给子项设置固定高度，否则会失去错落视觉效果
- 图片建议使用 object-fit: cover 统一裁剪比例
- 若需真正 Masonry 效果（列高均衡），可考虑 CSS column-count 或 JS 库如 Masonry.js
基本上就这些。用 Flexbox 搭配媒体查询实现类瀑布流，不复杂但容易忽略细节，尤其是宽度和间距的计算。只要掌握好断点和宽度分配，就能做出美观又响应式的布局。
