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

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