详解纯css实现瀑布流（multi-column多列及flex布局）

在这篇文章中，我将详细介绍如何使用纯CSS实现瀑布流布局。本文将涵盖以下两种方法：multi-column多列和flex布局。接下来，我将逐一介绍每种方法的实现步骤，并附上示例说明。

multi-column多列实现瀑布流布局

multi-column（多列）是CSS3的一个新属性，它可以将元素分成多列。通过将此属性应用于一个容器，并合理地设置一些其他属性，我们可以利用这个特性实现瀑布流布局。以下是实现步骤：

1. 给容器设置multi-column属性。比如：-webkit-column-count: 3;表示分成3列。

2. 使用column-gap属性设置列间隔。

3. 将元素按照指定顺序排列，并使用break-inside: avoid;属性防止元素在列中断行。

下面是一个示例代码：

.container {
  -webkit-column-count: 3; /* 分成3列 */
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 20px; /* 列间隔 */
  -moz-column-gap: 20px;
  column-gap: 20px;
}

.item {
  display: inline-block; /* 将元素变为行内块元素，实现紧凑排布 */
  width: 100%;
  margin-bottom: 20px;
  break-inside: avoid; /* 防止元素在列中断行 */
}

flex布局实现瀑布流布局

flex布局是CSS3中的另一种布局方式，比multi-column更加灵活和强大。通过设置display: flex属性，我们可以创建一个flex容器，并利用其中的属性对子元素进行排版。以下是实现步骤：

1. 给容器设置display: flex，启用flex属性。

2. 使用flex-direction属性指定主轴方向（水平或垂直）。

3. 使用flex-wrap属性设置换行方式（单行或多行）。

4. 设置子元素的flex-grow属性，使它们占用等量的空间。

下面是一个示例代码：

.container2 {
  display: flex; /* 启用flex属性 */
  flex-direction: row; /* 指定主轴方向为水平 */
  flex-wrap: wrap; /* 设为多行换行 */
}

.item2 {
  flex-grow: 1; /* 允许元素同等占用空间 */
  margin-right: 20px;
  margin-bottom: 20px;
}

以上就是使用multi-column和flex布局实现瀑布流布局的完整攻略。在实际开发中可以根据需要选择不同的方法来实现。