使用flexbox将元素对齐到底部

  • Z时代
  • 2024-01-10
  • 分类：问答

我有div一些孩子：

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

无论文本中有多少文本，p我都希望.button始终将其始终停留在底部，而不会将其从流程中移出。我听说这可以通过Flexbox实现，但我无法使其正常工作。

回答：

您可以使用自动边距

在通过justify-content和对齐之前align-self，任何正的自由空间都会分配给该维度中的自动边距。

因此，您可以使用以下一种（或两种）：

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */
.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>

或者，您可以在a增长之前使元素填充可用空间：

p { flex-grow: 1; } /* Grow to fill available space */
.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
p {
  flex-grow: 1;
}
<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将元素对齐到底部 的全部内容， 来源链接： utcz.com/qa/421139.html

回到顶部