CSS Flexbox 是一种布局模式，能够帮助开发者更轻松地实现复杂的布局，同时还能自动适应不同的屏幕尺寸。在本文中，我们将介绍如何使用 Flexbox 实现两列布局并使其底部粘性。
什么是两列布局？
两列布局是指将页面水平分成两部分，其中一部分放置主要内容，另一部分用于放置较不重要的内容（例如导航栏、广告等）。这种布局经常用于响应式设计，因为它可以自动适应不同的屏幕尺寸。
什么是粘性底部？
粘性底部是指页面的底部始终在屏幕的底部，无论页面内容的高度是否超出了屏幕大小。
使用 Flexbox 实现两列布局粘性底部的步骤
接下来，我们将一步步介绍如何使用 Flexbox 实现两列布局并使其底部粘性：
- 创建 HTML 结构
首先，我们需要创建一个基本的 HTML 结构，包括两个 div 元素，分别为主要内容和副内容。并且需要在最外层div元素上添加样式flex-container。
<div class="flex-container"> <div class="main-content"></div> <div class="secondary-content"></div> </div>
- 设置 Flexbox 样式
在上面创建的HTML结构中，在外层div元素上添加以下 Flexbox 样式，这将使主要内容和副内容水平排列，并撑满整个屏幕高度（使用100vh）。
.flex-container {
display: flex;
flex-direction: row;
height: 100vh;
}- 设置内容区域高度
接下来，我们需要为主要内容和副内容设置高度。我们使用 calc 函数计算出剩余空间的高度，并将其分配给主要内容。
.main-content {
flex: 1;
height: calc(100% - 60px);
}
.secondary-content {
height: 60px;
}- 创建粘性底部
为了创建粘性底部，我们需要使用以下代码将 secondary-content 元素转换为 Flexbox 容器。
.secondary-content {
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}现在，我们的页面底部将始终粘在屏幕底部。并且如果内容高度超出，主要内容会自动滚动。
示例代码
下面是完整的示例代码，您可以直接用于您的项目中：
<div class="flex-container"> <div class="main-content"></div> <div class="secondary-content"></div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ---- ------- ------ - ------------- - ----- -- ------- --------- - ------ - ------------------ - ------- ----- -------- ----- ---------------- ------- ------------ ------- -
总结
使用 Flexbox 实现两列布局并使其底部粘性非常容易，只需遵循上述步骤即可。通过使用这种布局，可以创建更加响应式的设计，使您的页面始终保持整洁和优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646461b7968c7c53b053fd72