在前端开发中，经常会碰到需要将一个元素固定在页面底部的需求。而 CSS Flexbox 布局则提供了一个简单而有效的实现方案。
Flexbox 简介
Flexbox 布局是一种用于页面布局的 CSS 模块，它允许你以弹性的方式布置元素。具体来说，它提供了一些用于控制弹性容器和弹性项目的 CSS 属性。
要使用 Flexbox 布局，需要将相应的 CSS 属性应用于所谓的“弹性容器”中，然后在该容器内对“弹性项目”进行排列。
实现固定底部按钮
下面是通过 Flexbox 布局实现固定底部按钮的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ----------------
-------
---- -
------- --
-------- --
-------- -----
----------- ------
--------------- -------
-
---- -
----- --
-
------ -
-------- -----
---------------- -------
------------ -------
----------------- --------
------- -----
-
------ -
-------- ---- -----
-------------- ----
---------- -----
------------ -----
------- --
----------------- --------
------ -----
------- --------
-
--------
-------
------
------
----------- -------------
----------------
-------
--------
---------------------
---------
-------
-------这个页面包含一个固定在底部的按钮，且在没有足够内容填满整个页面时，按钮也会保持在页面底部。现在让我们来一步步解释这个代码是如何工作的。
步骤一：创建一个弹性容器
我们首先需要将整个页面设为弹性容器，这可以通过设置 body 元素的 display 属性为 flex 来实现。我们还需要将 flex-direction 属性设置为 column，以确保弹性项目按照列的方式排列。
body {
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}步骤二：设置 main 元素的 flex 属性
接下来，我们需要将主内容区域的 flex 属性设置为 1，使它占据可用的空间。这样一来，当主内容区域的内容不足时，它就会填充整个页面。
main {
flex: 1;
}步骤三：创建一个固定底部的 footer
现在我们来创建一个在页面底部固定位置的 footer 元素。为了实现这个效果，我们需要将 footer 元素设为弹性项目，并使用 justify-content 和 align-items 属性使其垂直和水平居中。
footer {
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
height: 50px;
}步骤四：将按钮放在 footer 内
最后一步，我们将按钮放在 footer 元素内，并给它一些基本的样式以使其看起来更加美观。
-- -------------------- ---- ------- ------ - -------- ---- ----- -------------- ---- ---------- ----- ------------ ----- ------- -- ----------------- -------- ------ ----- ------- -------- -
结论
通过使用 CSS Flexbox 布局，我们可以很容易地实现固定底部按钮的功能。这种布局方法也适用于许多其他需要创建固定位置元素的情况。希望这篇文章能够帮助你更好地理解 Flexbox 布局，并为你的前端开发提供更多思路和灵感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752575a8bd460d3ad930f40