使用flexbox将元素对齐到底部 [英] Align an element to bottom with flexbox

问题描述

以下情况。我有一个div与一些元素：

 < div class =content> 
< h1>标题1< / h1> 
< h2>标题2< / h2> 
< p>一些文字或多或少< / p> 
< a href =/class =button>点击我< / a> 
< / div> 
  

，我想要有以下布局：

  ------------------- 
 | heading 1 | 
 | heading 2 | 
 | paragraph text | 
 |可以有很多| 
 | rows | 
 | | 
 | | 
 | | 
 | link-button | 
 ------------------- 
  

无论在 p 中有多少文本，我想将按钮始终放在底部，但不想将其移出流程。我听说过这可以用flexbox实现。

解决方案

您可以使用 auto margins

a href =http://www.w3.org/TR/css-flexbox-1/#propdef-justify-content> justify-content 和 align-self

因此，您可以将
分配给
维度中的汽车边距。使用这些（或两者）之一：

  p {margin-bottom：auto; } / *将以下元素推到底部* / 
 a {margin-top：auto; } / *将它和以下元素推到底部* / 
  

  .content {height：200px; border：1px solid;显示：flex; flex-direction：column;} h1，h2 {margin：0;} a {margin-top：auto;}  

 < div class =content> < h1>标题1< / h1> < h2>标题2< / h2> < p>一些文字或多或少< / p>  

p>



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

  p {flex-grow：1; } / *增加可用空间* / 
  

  .content {height：200px; border：1px solid;显示：flex; flex-direction：column;} h1，h2 {margin：0;} p {flex-grow：1;}  

 < div class =content> < h1>标题1< / h1> < h2>标题2< / h2> < p>一些文字或多或少< / p>  

p>


following situation. I have a div with some elements:

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

and I want to have following layout:

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|can have many      |
|rows               |
|                   |
|                   |
|                   | 
|link-button        |
 -------------------

regardless how much text is in the p I want to stick the button always at the bottom, but don't want to take it out the flow. I've heard this could be achievable with flexbox. But I can't get it to work.

解决方案

You can use auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

So you can use one of these (or both):

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>

Alternatively, you can make the element before the a grow to fill the available space:

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将元素对齐到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！