CSS Flexbox 是一种强大的布局方式，可以帮助我们轻松实现各种复杂的布局效果。在本文中，我们将学习如何使用 CSS Flexbox 实现垂直布局的常用技巧。
什么是 CSS Flexbox
Flexbox 是一种用于布局的 CSS3 模块，可以方便地实现弹性盒子布局。它可以让子元素按照一定的规则排列，同时保证子元素在容器中的位置、大小和间距，从而达到灵活、自适应的布局效果。
如何实现垂直布局
在 CSS 中实现垂直布局，有多种方式，例如使用 float、position、table 等方式。但这些方式都有其局限性，而且可能导致代码冗余，难以维护。因此，我们推荐使用 CSS Flexbox 实现垂直布局。
使用 CSS Flexbox 实现垂直布局非常简单，只需要在容器上设置 display: flex;，并设置 flex-direction: column; 即可。接下来，我们将介绍一些常用的技巧，使你能够更好地掌握 CSS Flexbox。
1. 垂直居中
在实现垂直居中时，我们可以使用 align-items: center; 属性，这将使子元素相对于容器垂直居中。
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}2. 底部对齐
如果你想实现底部对齐的效果，可以使用 align-items: flex-end; 属性，这将使子元素相对于容器底部对齐。
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
}3. 顶部对齐
要实现顶部对齐的效果，可以使用 align-items: flex-start; 属性，这将使子元素相对于容器顶部对齐。
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}4. 空间平均分配
要实现子元素在容器中平均分配空间的效果，可以使用 justify-content: space-around; 或 justify-content: space-between; 属性。其中，space-around 将在子元素之间添加相等的空白间距，而 space-between 则不会添加空白间距。
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
}5. 固定元素与自适应元素结合布局
在实现固定元素与自适应元素结合布局时，我们可以使用 flex-grow 和 flex-shrink 属性来控制元素的自适应性。其中，flex-grow 控制元素在容器中的剩余空间分配比例，而 flex-shrink 控制元素缩小时的比例。
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ---------------- ------- - ------ - ------ ------ ------- ------ - --------- - ---------- -- ------------ -- -
总结
CSS Flexbox 是实现弹性盒子布局的一种强大方式，能够帮助我们快速、简单地创建各种复杂的布局效果。通过本文的学习，相信你已经对 CSS Flexbox 实现垂直布局有了更深入的了解和掌握。在实际项目中，你可以灵活运用这些技巧，使你的页面布局更加灵活、美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649164f148841e9894f67c06