如何使用 Flexbox 將元素與容器底部對齊？

使用 Flexbox 將元素底部對齊

在提供的場景中，您有一個包含各種子元素的 div 容器。您的目標是實現元素垂直堆疊的佈局，無論文字高度如何，按鈕始終位於底部。

Flexbox 透過自動邊距提供了此問題的解決方案。自動邊距可以在對齊之前將剩餘空間分配給具有自動邊距的元素。實現所需佈局的一種方法是使用以下CSS：

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

或者，您可以使用以下所示的Flex 佈局：

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

<div class="content">
  <h1 id="heading">heading 1</h1>
  <h2 id="heading">heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

此方法可確保文字元素展開以填滿可用高度，而按鈕則被推至容器底部。

以上是如何使用 Flexbox 將元素與容器底部對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！