使用 Flexbox 將元素底部對齊
在提供的場景中,您有一個包含各種子元素的 div 容器。您的目標是實現元素垂直堆疊的佈局,無論文字高度如何,按鈕始終位於底部。
Flexbox 透過自動邊距提供了此問題的解決方案。自動邊距可以在對齊之前將剩餘空間分配給具有自動邊距的元素。實現所需佈局的一種方法是使用以下CSS:
1 2 |
|
或者,您可以使用以下所示的Flex 佈局:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 2 3 4 5 6 |
|
此方法可確保文字元素展開以填滿可用高度,而按鈕則被推至容器底部。
以上是如何使用 Flexbox 將元素與容器底部對齊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!