如何使用 Flexbox 将元素与容器底部对齐？

使用 Flexbox 将元素底部对齐

在提供的场景中，您有一个包含各种子元素的 div 容器。您的目标是实现元素垂直堆叠的布局，无论文本高度如何，按钮始终位于底部。

Flexbox 通过自动边距提供了此问题的解决方案。自动边距可以在对齐之前将剩余空间分配给具有自动边距的元素。实现所需布局的一种方法是使用以下 CSS：

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

或者，您可以使用如下所示的 Flex 布局：

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