如何使用 flexbox 将按钮推到页面底部? [复制]

Posted

技术标签:

【中文标题】如何使用 flexbox 将按钮推到页面底部? [复制]【英文标题】:How can I push the button to the bottom of the page using flexbox? [duplicate] 【发布时间】:2018-08-17 20:16:48 【问题描述】:

如何使用 flexbox 将按钮定位在最底部? 还是应该使用position: absolute

.container 
  display: flex; 
  flex-direction: column; 
  border: 1px solid; 
  height: 180px;


button 
  align-self: center;
    <html>
      <body>
        <div class="container">
          <p> Paragraph one </p>
          <p> Paragraph two </p>
          <button > on the very bottom </button>
        </div>
      </body>
    </html>

【问题讨论】:

【参考方案1】:

使用 flexbox,将flex-grow: 1; 添加到第二段。

.container 
  display: flex; 
  flex-direction: column; 
  border: 1px solid; 
  height: 180px;


p.flex-bottom 
  flex-grow: 1;


button 
  align-self: center;
    <html>
      <body>
        <div class="container">
          <p> Paragraph one </p>
          <p class="flex-bottom"> Paragraph two </p>
          <button > on the very bottom </button>
        </div>
      </body>
    </html>

【讨论】:

以上是关于如何使用 flexbox 将按钮推到页面底部? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 flexbox 使两个项目一个中心一个底部

将按钮固定到 flexbox 列布局的底部,margin-top:auto 不起作用

Flexbox 与 flex 列之间的对齐内容空间

当其他元素居中对齐时,使用 Flexbox 将页脚与页面底部对齐

将页脚推到短页面的底部

javascript 一个js选项,用于将网页页脚推到页面底部,但不会将其作为粘性页脚。