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

使用Flexbox 將元素與底部對齊

Flexbox 提供了一種強大的解決方案，用於在容器內對齊元素，其多功能功能之一是將元素與容器底部對齊他們的容器。讓我們探討如何在實際場景中實現這種對齊。

鑑於提供的HTML 結構，我們的目標是使用Flexbox 將“.button”元素對齊到底部，無論段落中存在多少文本.

使用自動邊距

使用Flexbox 將元素與底部對齊的關鍵在於操縱邊距。具體來說，我們可以利用「自動保證金」的概念來實現我們期望的行為。自動邊距會自動將可用空間指派給具有「自動」邊距值的元素。

因此，應用這些CSS 屬性之一（或兩者）會將「.button」元素推到底部：

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

範例實作

在範例中，我們建立了一個啟用了Flexbox 且具有列方向的父容器。我們對段落和按鈕套用「自動」邊距。因此，無論段落中的文字內容如何變化，按鈕都會被推到底部。

<div class="content">

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