如何使 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中文网其他相关文章！