什么是 Flexbox 布局
Flexbox 布局是一种 CSS 布局模式，它可以用来布局一个容器中的子元素。Flexbox 通过指定容器的属性来控制子元素的布局，例如子元素的位置、大小和顺序等。
Flexbox 布局的属性
Flexbox 布局主要有以下几个重要的属性：
display: flex;：指定容器为 Flexbox 布局。flex-direction: row/column;：指定 Flexbox 布局的方向，可以是水平（row）或垂直（column）。justify-content: flex-start/flex-end/center/space-between/space-around;：指定如何对齐 Flexbox 布局中子元素沿主轴的位置。align-items: flex-start/flex-end/center/baseline/stretch;：指定如何对齐 Flexbox 布局中子元素沿交叉轴的位置。flex: flex-grow/flex-shrink/flex-basis;：指定 Flexbox 布局中子元素的弹性伸缩能力。
实现元素的底部粘性
在实际的网站开发中，我们经常需要将某些元素固定在页面的底部，以便其始终能够被访问到。在传统的布局方式中，这通常需要使用一些 hack 的方式来实现，而在 Flexbox 布局中，我们可以很轻松地实现这个效果。
首先，我们需要一个包含所有内容的容器元素，这个容器元素将作为我们的 Flexbox 布局容器。接下来，我们需要在容器元素中添加一个空的子元素，用于占据剩余的空间，并将它的 flex 属性设置为 1。最后，我们只需要对容器元素添加以下属性，即可实现元素的底部粘性：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ----------- ------ - ------------------ - -------- --- ----- -- -
以上代码中，min-height: 100vh 的作用是确保容器元素的最小高度为视口高度，以便容器元素可以占据整个视口。container::before 选择器用于选中容器元素的第一个子元素，并将它的 flex 属性设置为 1，使它占据剩余的空间。由于容器元素的 flex-direction 属性已经设置为 column，因此子元素将会按照垂直方向排列，使得第一个子元素（即占据剩余空间的空元素）总是在容器元素的底部。
示例代码
以下是一个使用 Flexbox 布局实现元素底部粘性的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
-------
---- -
------- --
-------- --
-
---------- -
-------- -----
--------------- -------
----------- ------
-------- -----
----------------- -----
----------- -----------
-
------- -
----------------- --------
------ -----
-------- -----
----------- -------
-
----- -
----------------- -----
------ -----
-------- -----
----- --
-
------- -
----------------- --------
------ -----
-------- -----
----------- -------
-
------------------ -
-------- ---
----- --
-
--------
-------
------
---- ------------------
---- ---------------
----------- ---------
------
---- -------------
--------- ------- -------------------------
------
---- ---------------
------- ------ --------
------
------
-------
-------在以上示例代码中，我们将 container 类作为 Flexbox 布局的容器，其中包含了一个顶部的 header 元素、一个中间的 main 元素和一个底部的 footer 元素。通过为容器元素添加 min-height: 100vh 属性，并将空元素的 flex 属性设置为 1，我们成功实现了底部元素的粘性定位。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cde7cee46428fe9e7aa12d