使用 flexbox 将元素与底部对齐

小编典典

使用 flexbox 将元素与底部对齐

all

我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 实现，但我无法让它发挥作用。

阅读 174

2022-03-08

共1个答案

小编典典

您可以使用自动边距

在通过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>

2022-03-08