在前端开发中，我们经常会遇到需要实现固定在底部的菜单栏的需求。而在移动设备上，由于屏幕尺寸的不同，我们需要保证菜单栏的自适应性。这时候，Flexbox 布局就可以派上用场了。
什么是 Flexbox 布局？
Flexbox 布局是一种新的布局方式，它可以让我们更加方便地对弹性盒子进行布局。相比于传统的布局方式，Flexbox 布局具有以下优点：
- 简单易懂：相对于传统的布局方式，Flexbox 布局的概念更加简单易懂。
- 自适应性强：Flexbox 布局可以轻松地实现自适应布局，适应不同的设备和屏幕尺寸。
- 灵活性强：Flexbox 布局可以轻松地实现各种复杂的布局，比如垂直居中、对齐等。
实现底部固定菜单栏
接下来，我们将使用 Flexbox 布局来实现一个自适应的底部固定菜单栏。首先，我们需要创建一个 HTML 结构，包含菜单栏和其它内容：
// www.javascriptcn.com code example
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
padding: 20px;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
background-color: #333;
color: #fff;
padding: 0 20px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>这是一个标题</h1>
<p>这是一段内容</p>
</div>
<div class="menu">
<div>菜单项 1</div>
<div>菜单项 2</div>
<div>菜单项 3</div>
</div>
</div>
</body>
</html>在上面的 HTML 结构中，我们使用了 Flexbox 布局来实现菜单栏的自适应性。具体来说，我们使用了以下 CSS 属性：
display: flex;：将.container元素设置为弹性盒子。flex-direction: column;：将.container元素的主轴方向设置为垂直方向。min-height: 100vh;：将.container元素的高度设置为至少占满整个视口的高度。flex: 1;：将.content元素设置为弹性盒子的一个子元素，并且将其伸展以占据剩余的空间。display: flex;：将.menu元素设置为弹性盒子。justify-content: space-between;：将.menu元素的子元素水平对齐，并且在它们之间留出空白。align-items: center;：将.menu元素的子元素垂直对齐居中。
通过上述 CSS 属性，我们可以轻松地实现一个自适应的底部固定菜单栏。
结语
通过本文的介绍，我们学习了如何使用 Flexbox 布局来实现一个自适应的底部固定菜单栏。如果你想深入了解 Flexbox 布局的更多知识，可以查看相关的文档和教程。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/679659fb504e4ea9bdd13605