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