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

使用Flexbox 將元素底部對齊

在div 容器中填充子元素（包括標題、段落）的場景中，和一個按鈕，無論段落中的文字量如何，都可能需要將按鈕與容器的底部對齊。使用 Flexbox 可以有效地實現這種對齊。

要使用自動邊距實現這種底部對齊，可以應用以下 CSS：

p { margin-bottom: auto; }

指令將所有下列元素推送到底部容器。或者，可以使用以下方式定位按鈕本身：

a { margin-top: auto; }

這會提示按鈕和後續元素被推到底部。

在 div 容器中，Flexbox 屬性設定為如下：

.content {
  display: flex;
  flex-direction: column;
}

這些設定為容器內的子元素建立欄位佈局。標題缺少邊距值以防止連續元素之間出現間距。按鈕上的自動邊距確保它始終佔據底部位置。

透過實作這些樣式調整，可以實現所需的佈局，無論文字內容如何變化，按鈕都固定在容器的底部在段落中。

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