什么是 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，我们成功实现了底部元素的粘性定位。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cde7cee46428fe9e7aa12d
