瀑布流布局是指在一个容器里，每个元素按照固定宽度等比例缩放并展示，形成一列列错落有致的布局。这种布局方式常用于图片展示、商品展示等场景。本文将介绍使用 CSS Flexbox 实现瀑布流布局的方法。
CSS Flexbox 简介
CSS Flexbox 是一种 CSS 布局方式，采用弹性盒子模型（flex box），能够更加灵活方便地布局容器里面的子元素。与传统的 CSS 布局方式相比，CSS Flexbox 具有以下优势：
- 更加灵活：可以通过设置容器的属性，自动调整子元素的位置、大小等样式。
- 更加方便：可以通过简单的属性设置实现复杂的布局效果。
- 更加可扩展：可以方便地扩展布局，支持多种方向、对齐方式和分布方式。
实现瀑布流布局的方法
要实现瀑布流布局，可以借助 CSS Flexbox 的一些特性，具体步骤如下：
- 定义容器
首先，我们需要定义一个容器来存放所有的子元素。容器可以使用 Flexbox 容器实现。容器的样式可以设置如下：
.container {
display: flex;
flex-wrap: wrap;
}这里使用 display: flex; 来设置容器为 Flexbox 容器，flex-wrap: wrap; 来允许子元素自动换行，以实现瀑布流效果。接下来我们将定义子元素的样式。
- 定义子元素
子元素是瀑布流布局的重点。要实现子元素的布局，可以设置它们的宽度、高度、间距等样式。为了实现自适应宽度，我们可以使用 flex-grow 属性，来让每个子元素自动占据一定的宽度。同时，我们也可以设置每个子元素的高度和间距，使它们展示出瀑布流的效果。
.item {
flex-grow: 1;
height: 300px;
margin: 10px;
}这里的 flex-grow: 1; 表示每个子元素都自动占据一定的宽度，而 height: 300px; 则表示每个子元素的高度都是固定的 300px。同时，设置 margin: 10px; 来控制子元素之间的间距。
- 完成布局
最后，我们只需要将所有子元素放置在容器中即可。在 HTML 中，可以使用 div 标签来定义一个容器，再将多个子元素使用 div 内嵌即可。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> ... </div>
这里我们可以在容器中嵌套多个 div 标签，每个 div 标签设置成子元素即可。最终，瀑布流布局就实现了。
示例代码
下面是一个完整的示例代码，你可以运行它来看效果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------- ------------------
-------
---------- -
-------- -----
---------- -----
-
----- -
---------- --
------- ------
------- -----
-
-------------------- -
----------------- --------
-
--------------------- -
----------------- --------
-
--------
-------
------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------总结
瀑布流布局是一种非常实用的布局方式，用于图片展示、商品展示等场景。使用 CSS Flexbox 实现瀑布流布局的方法简单易懂，只需要通过几行代码就能实现复杂的布局效果。需要注意的是，在实现过程中要注意容器和子元素的设置，以达到理想的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf9e2a9e06631ab9c23978