瀑布流布局：两种纯 CSS 神技

2023-09-21 17:11:43

瀑布流布局，又称瀑布流排版，是一种类似瀑布的布局方式，内容块按从左到右、从上到下的顺序排列，就像瀑布一样流淌而下。它在网页设计中广泛用于展示图片、文章列表等内容，能有效利用页面空间，提升用户体验。

实现瀑布流布局的方法有很多，其中纯 CSS 的方式因其跨平台兼容性好、代码简洁等优势而备受青睐。本文将介绍两种纯 CSS 实现瀑布流布局的技巧，带你领略 CSS 布局的强大魅力。

技巧一：网格布局（Grid）

Grid 布局是 CSS3 中引入的一项强大布局特性，它允许开发者使用网格系统来布局页面元素。借助 Grid 布局，我们可以轻松实现瀑布流布局。

代码示例：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 10px;
  margin: 0;
}

在这个示例中，.container 是瀑布流布局的容器，它使用 grid-template-columns 属性定义了网格列，repeat(auto-fit, minmax(250px, 1fr)) 意味着创建尽可能多的列，每列的最小宽度为 250px，最大宽度为浏览器窗口的剩余宽度。.item 是瀑布流中的单个内容块。

技巧二：弹性盒布局（Flexbox）

Flexbox 布局同样是 CSS3 中引入的一项布局特性，它允许开发者使用灵活的盒子模型来布局页面元素。Flexbox 也能用来实现瀑布流布局。

代码示例：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

.item {
  flex: 1 0 auto;
  margin: 10px;
}

在这个示例中，.container 是瀑布流布局的容器，它使用 flex-direction: column 属性将内容块垂直排列，flex-wrap: wrap 允许内容块自动换行。.item 是瀑布流中的单个内容块，flex: 1 0 auto 意味着内容块在水平方向上尽可能占据空间，在垂直方向上自动伸缩。