当前位置：首页 > 文章列表 > 文章 > 前端 > 如何在CSS中使用Flexbox制作底部按钮排列_flex和justify-content结合

如何在CSS中使用Flexbox制作底部按钮排列_flex和justify-content结合

2026-05-24 23:32:18 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《如何在CSS中使用Flexbox制作底部按钮排列_flex和justify-content结合》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

通过设置父容器为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>