Flexbox 布局是一种非常优秀的布局方式，它可以让我们更好地掌握各种布局需求。其中，固定底部导航是一种常见的需求，在本文中我们将介绍如何利用 Flexbox 布局实现这一需求。
什么是 Flexbox 布局
Flexbox 是 CSS3 引入的一种全新的布局方式，可以简单明了地改善网页中布局的复杂性。Flexbox 主要有两个特点：
- 提供了强大的可伸缩布局能力
- 可以轻松实现自适应以及我们所需要的排版方式
有了 Flexbox 布局，我们可以更好地解决网页排版方面的难题，尤其是在处理固定底部导航这种特殊布局要求上更是方便得多。
实现固定底部导航
首先，在 HTML 中新增一块容器，这块容器包裹整个网页，包括顶部菜单、内容区域以及底部导航栏，如下：
<div class="wrapper"> <header class="header">Header</header> <section class="content">Content</section> <nav class="nav">Nav</nav> </div>
接着，在 CSS 中对这个容器进行处理，使它使用 Flexbox 布局：
.wrapper {
height: 100vh;
display: flex;
flex-direction: column;
}在这段代码中，height: 100vh 表示高度为当前视口的高度，这样就可以使得整个页面内容被撑满视口。比如用户打开页面时，这个容器会被设置为屏幕高度一样大，而且，在用户滚动页面滚动到底部时，底部导航栏仍能维持在页面底部。
接下来，我们对导航部分进行处理，让它始终位于页面的最底部：
.nav {
margin-top: auto;
align-self: flex-end;
}这段代码中的 margin-top: auto 可以使得导航栏离容器顶部的距离变得更大，从而将导航栏推到页面底部。而 align-self: flex-end 意为将导航栏自行居于容器底部靠右位置。
接下来，我们针对整个容器进行浏览器兼容性处理：
-- -------------------- ---- ------- -------- - ------- ------ -------- ------------ -------- --------- -------- ---- -------- ------------- -------- ------------ -------- ----- ------------------- --------- ---------------- --------- ----------- --------- ----------------------- ------- ------------------- ------- --------------- ------- -
完整代码
-- -------------------- ---- ------- ---- ---------------- ------- ------------------------------ -------- --------------------------------- ---- --------------------- ------ ------- -------- - ------- ------ -------- ------------ -------- --------- -------- ---- -------- ------------- -------- ------------ -------- ----- ------------------- --------- ---------------- --------- ----------- --------- ----------------------- ------- ------------------- ------- --------------- ------- - ---- - ----------- ----- ----------- --------- - --------
结论
实现固定底部导航在 Flexbox 布局下变得容易了许多。使用 Flexbox，可以得到流畅，方便且简单的设计workflows，而使得我们的 CSS 代码变得更加简洁明了。
此外，CSS 引入 Flexbox 这种全新的布局方式，显然让前端开发工作变得更有趣，并且更加有利于前端开发人员掌握网页设计与布局方面的技能和知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c3742208e8e1a085c2655