如何在CSS中使用Flexbox制作底部按钮排列_flex和justify-content结合-css教程-PHP中文网

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

P粉602998670

发布： 2025-12-01 18:49:21

原创

574人浏览过

通过设置父容器为flex布局并使用flex-direction: column，配合margin-top: auto将按钮推至底部，再在按钮容器上应用justify-content实现水平对齐，如居中、靠左或两端分布，适用于表单、弹窗等场景。

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

在使用 Flexbox 布局时，将按钮排列在容器底部并进行水平对齐，可以通过 flex-direction、justify-content 和容器的 flex 布局结构来实现。关键在于让父容器成为 flex 容器，并控制子元素（如按钮）在交叉轴（垂直方向）上的位置。

1. 设置父容器为 Flex 并让内容靠底部对齐

要让按钮出现在容器的底部，需要设置父容器为 display: flex，并通过 flex-direction: column 让内容纵向排列。然后利用 margin-top: auto 将按钮“推”到底部。

博思AIPPT

博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。

117

查看详情

立即学习“前端免费学习笔记（深入）”；

.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>

登录后复制