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

使用 Flexbox 將元素與底部對齊

使用 Flexbox 可以實現將元素與其容器底部對齊。在這種情況下，如果有一個帶有各種子元素的 div 並希望將 .button 元素固定在底部，Flexbox 提供了一個解決方案。

Flexbox 在執行對齊之前將可用空間分配給「自動邊距」調整內容和自我對齊。這意味著我們可以使用自動邊距將 .button 元素推到底部，而無需將其從流程中刪除。

具體操作方法如下：

使用Margin-Bottom: Auto

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

此規則將下列元素（包括.button 元素）推到底部

使用Margin-Top: Auto

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

或者，此規則將 .button 元素和任何後續元素推到底部。

為了示範效果，請考慮以下HTML 和CSS:

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}

h1, h2 {
  margin: 0;
}

a {
  margin-top: auto;
}

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

這將建立一個具有固定高度的容器，其中.button 元素將保留在底部，無論段落中的文字量如何。

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