怎么用flexbox将元素与底部对齐?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (47)

我有一个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 { 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>

用户回答回答于

可以使用display:flex将一个元素定位到底部,但我不认为你想在这种情况下使用flex,因为它会影响你的所有元素。要使用flex定位元素到底部,请尝试以下操作:

.container {
  display: flex;
}

.button {
  align-self: flex-end;
}

最好的选择是将位置:absolute设置为按钮并将其设置为bottom:0,或者可以将按钮放置在容器外部,并使用负的transormY(-100%)将它放入容器中,如下所示:

.content {
    height: 400px;
    background: #000;
    color: #fff;
}
.button {
    transform: translateY(-100%);
    display: inline-block;
}

扫码关注云+社区