如何使 Flexbox 容器內的元素底部對齊？

Flexbox：底部對齊元素

如果您有一個包含子元素的容器元素，並且您想要對齊最底部的子元素垂直於容器底部，多功能Flexbox 佈局模型提供了有效的解決方案。

在示例中提供：

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

您想要以下佈局：

-------------------
| heading 1          |
| heading 2          | 
| paragraph text     |
| can have many      |
| rows               |
|                   |
|                   |
|                   | 
| link-button        |
-------------------

利用自動邊距

自動邊距被證明是一個方便的工具這個場景。在透過 justify-content 和align-self 進行對齊過程之前，任何剩餘的可用空間都會自動分配到該維度中的自動邊距。

因此，您可以採用以下一項或兩項CSS 規則：

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

範例實作

應用建議的CSS 規則，並結合Flexbox 容器柱狀方向，產生所需的結果：

.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>

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