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

【问题标题】：How can I push the button to the bottom of the page using flexbox? [duplicate]如何使用 flexbox 将按钮推到页面底部？ [复制]
【发布时间】：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>

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：