在前端开发中，我们经常需要实现多个元素的垂直排列，并且要求它们之间的间距相等。这时，CSS Flexbox 布局就能够帮助我们轻松实现这一需求。
Flexbox 布局
Flexbox 布局是一种全新的 CSS 布局模式，它能够让我们更加方便地实现响应式布局和复杂的页面布局。它的核心思想是将容器中的子元素放置在一个“弹性盒子”中，通过设置弹性盒子的属性来控制子元素的排列方式和间距。
实现垂直等间距排列
下面我们就来看一下如何使用 Flexbox 布局实现两个 div 垂直等间距排列。
首先，我们需要创建一个容器，将两个 div 放置在其中。我们可以使用以下 HTML 代码：
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> </div>
接下来，我们需要为容器设置 Flexbox 属性。我们可以使用以下 CSS 代码：
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 200px;
}这段 CSS 代码中，我们使用了 display: flex; 将容器设置为 Flexbox 布局。flex-direction: column; 表示子元素垂直排列。justify-content: space-between; 表示子元素之间的间距相等。height: 200px; 表示容器的高度为 200px。
最后，我们需要为子元素设置一些样式，使它们具有一定的高度和样式。我们可以使用以下 CSS 代码：
// www.javascriptcn.com code example
.box {
width: 100%;
height: 80px;
background-color: #eee;
border: 1px solid #ccc;
box-sizing: border-box;
text-align: center;
line-height: 80px;
}这段 CSS 代码中，我们设置了子元素的宽度为 100%、高度为 80px，背景颜色为 #eee，边框为 1px 实线，盒模型为 border-box，文本居中，行高为 80px。
最终，我们就能够实现两个 div 垂直等间距排列的效果了。完整的 HTML 和 CSS 代码如下：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Flexbox：如何实现两个 div 垂直等间距排列</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 200px;
}
.box {
width: 100%;
height: 80px;
background-color: #eee;
border: 1px solid #ccc;
box-sizing: border-box;
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
</body>
</html>深入学习
除了上述简单的实现方式，Flexbox 布局还有许多强大的属性和技巧，可以帮助我们更加方便地实现复杂的页面布局和响应式设计。如果你想深入学习 Flexbox 布局，可以参考以下资源：
- A Complete Guide to Flexbox：CSS-Tricks 的一篇完整的 Flexbox 布局指南，详细讲解了 Flexbox 的各种属性和用法。
- Flexbox Froggy：一个有趣的游戏，可以帮助你学习和练习 Flexbox 布局的各种技巧和用法。
指导意义
在实际的前端开发中，我们经常需要实现多个元素的垂直排列，并且要求它们之间的间距相等。使用 CSS Flexbox 布局可以帮助我们轻松实现这一需求，从而提高开发效率和代码质量。
此外，学习和掌握 Flexbox 布局还能够帮助我们实现更加复杂和灵活的页面布局和响应式设计，从而提高网站的用户体验和用户满意度。因此，我们应该在日常的前端开发中积极学习和应用 Flexbox 布局。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d8cf38a941bf7134f6590a