使用Flexbox实现弹性页脚需将根容器设为flex-direction: column且min-height: 100vh，主内容区用flex: 1撑满空间，页脚自然置于底部；通过justify-content控制垂直对齐，align-items控制水平对齐，实现响应式布局。
在现代网页布局中，实现一个始终位于页面底部的弹性页脚（Sticky Footer）是常见需求。利用 Flexbox 的 justify-content 和 align-items 属性，可以轻松实现内容对齐与页脚定位，无需复杂计算。
整体结构设置为 Flex 容器
要实现弹性页脚，需将页面最外层容器设为 Flex 布局，并让主内容区域自动撑满剩余空间。
关键步骤：- 将
html或根容器高度设为 100%，确保占满视口 - 设置容器
display: flex且flex-direction: column - 主内容区域使用
flex: 1占据可用空间，推动页脚到底部
示例代码：
<div class="container"> <header>头部</header> <main class="content">内容区</main> <footer>页脚</footer> </div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* 占满整个视口高度 */
}
<p>.content {
flex: 1; /<em> 主内容区域伸展以填充空间 </em>/
}</p><p>footer {
padding: 1rem;
background: #333;
color: white;
}</p>使用 justify-content 控制主轴对齐
justify-content 用于沿主轴（默认为垂直方向下的纵向）对齐子元素。
- 若希望内容在垂直方向居中，可将
justify-content: center应用于容器 - 页脚仍会自然排列在最后位置，不受影响
例如，在内容较少时让主体内容垂直居中显示：
.container {
display: flex;
flex-direction: column;
justify-content: center; /* 内容垂直居中 */
min-height: 100vh;
}
<p>.content {
flex: 1;
}
/<em> 页脚仍正常显示在底部 </em>/</p>使用 align-items 实现横轴对齐
align-items 控制子元素在横轴上的对齐方式（默认为水平居中对齐）。
常见用法：-
align-items: center让所有子元素水平居中 -
align-items: flex-start左对齐 -
align-items: flex-end右对齐
若希望页脚文字和内容都水平居中：
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center; /* 所有子元素水平居中 */
}
<p>.content {
flex: 1;
width: 100%;
max-width: 800px;
text-align: center;
}</p>注意：当使用 align-items: center 时，子元素宽度可能被压缩，建议为子元素设置明确的 width 或使用 align-self 单独控制。
基本上就这些。通过合理使用 Flexbox 的 justify-content 和 align-items，配合 flex: 1 延伸主内容区，就能实现既美观又响应式的弹性页脚布局。不复杂但容易忽略细节。
