使用 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中文網其他相關文章！
