通过设置父容器为flex布局并使用flex-direction: column，配合margin-top: auto将按钮推至底部，再在按钮容器上应用justify-content实现水平对齐，如居中、靠左或两端分布，适用于表单、弹窗等场景。
在使用 Flexbox 布局时，将按钮排列在容器底部并进行水平对齐，可以通过 flex-direction、justify-content 和容器的 flex 布局结构来实现。关键在于让父容器成为 flex 容器，并控制子元素（如按钮）在交叉轴（垂直方向）上的位置。
1. 设置父容器为 Flex 并让内容靠底部对齐
要让按钮出现在容器的底部，需要设置父容器为 display: flex，并通过 flex-direction: column 让内容纵向排列。然后利用 margin-top: auto 将按钮“推”到底部。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 或固定高度 */
}
<p>.buttons {
margin-top: auto;
}</p>这里 margin-top: auto 会吸收上方所有剩余空间，使按钮区域紧贴容器底部。
2. 使用 justify-content 控制按钮的水平排列
当按钮容器已经是 flex 子项并位于底部后，可以在按钮的父级（即 .buttons）上再次使用 Flexbox 来控制按钮之间的水平分布。
立即学习“前端免费学习笔记（深入）”；
.buttons {
display: flex;
justify-content: center; /* 水平居中 */
gap: 10px;
padding: 10px;
}
<p>/<em> 其他 justify-content 可选值 </em>/
justify-content: flex-start; /<em> 靠左 </em>/
justify-content: flex-end; /<em> 靠右 </em>/
justify-content: space-between; /<em> 两端对齐 </em>/
justify-content: space-around; /<em> 均匀间隔 </em>/</p>这样就可以灵活地控制按钮在底部的水平排布方式。
3. 完整示例代码
<div class="container">
<div class="content">
<p>页面主要内容</p>
</div>
<div class="buttons">
<button>取消</button>
<button>确定</button>
</div>
</div>
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 20px;
}
<p>.content {
/<em> 主内容区域，不设高度则自动撑开 </em>/
}</p><p>.buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: auto;
}</p><p>button {
padding: 8px 16px;
}</p>4. 实际应用场景
这种布局常见于表单页、弹窗底部或移动端操作栏。通过组合 flex 和 justify-content，可以轻松实现响应式且美观的按钮排列，无需绝对定位或 JavaScript。
基本上就这些。掌握 margin-top: auto 在 flex 布局中的“吸底”特性，再配合 justify-content 的水平控制，就能高效实现底部按钮排列。
