使用flexbox将元素与底部对齐

本文翻译自：Align an element to bottom with flexbox

I have a div with some children: 我和一些孩子有一个div ：

  
heading 1
  
heading 2
  
Some more or less text
  Click me

and I want the 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 without taking it out of the flow. 无论p多少文本，我都希望将.button始终放在底部而不将其从流程中取出。 I've heard this can be achievable with Flexbox but I can't get it to work. 我听说这可以通过Flexbox实现，但我无法让它工作。

---

#1楼

参考：https://stackoom.com/question/264kH/使用flexbox将元素与底部对齐

---

#2楼

You can use display: flex to position an element to the bottom, but I do not think you want to use flex in this case, as it will affect all of your elements. 您可以使用display：flex将元素定位到底部，但我认为您不想在这种情况下使用flex，因为它会影响您的所有元素。

To position an element to the bottom using flex try this: 要使用flex将元素定位到底部，请尝试以下操作：

.container {
  display: flex;
}

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

Your best bet is to set position: absolute to the button and set it to bottom: 0 , or you can place the button outside the container and use negative transform: translateY(-100%) to bring it in the container like this: 你最好的选择是设置位置：绝对按钮并将其设置为bottom: 0 ，或者你可以将按钮放在容器外面并使用负transform: translateY(-100%)将它带到容器中，如下所示：

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

Check this JSFiddle 检查这个JSFiddle

---

#3楼

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. 在通过justify-content和align-self进行对齐之前，任何正空闲空间都会分配到该维度中的自动边距。

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

 
 
heading 1
 
heading 2
 
Some text more or less
 Click me  

Alternatively, you can make the element before the a grow to fill the available space: 另外，您也可以使元件前的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; } 

 
 
heading 1
 
heading 2
 
Some text more or less
 Click me  

---

#4楼

The solution with align-self: flex-end; 具有align-self: flex-end;的解决方案align-self: flex-end; didn't work for me but this one did in case you want to use flex: 对我来说不起作用，但是如果你想使用flex，这个就做了：

Result 结果

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|                   |
|                   |
|                   | 
|link button        |
 -------------------

Code 码

Note: When "running the code snippet" you have to scroll down to see the link at the bottom. 注意：当“运行代码段”时，您必须向下滚动才能看到底部的链接。

 .content { display: flex; justify-content: space-between; flex-direction: column; height: 300px; } .content .upper { justify-content: normal; } /* Just to show container boundaries */ .content .upper, .content .bottom, .content .upper > * { border: 1px solid #ccc; } 

 
 
 
heading 1
 
heading 2
 
paragraph text
 
 
 link button 
  

---

#5楼

Not sure about flexbox but you can do using the position property. 不确定flexbox但你可以使用position属性。

set parent div position: relative and child element which might be an

or

etc.. set position: absolute and bottom: 0 . set parent div position: relative和child元素，可能是

或

等。设置position: absolute和bottom: 0 。

Example: 例：

index.html 的index.html

  
Child

style.css style.css文件

.parent {
  background: gray;
  width: 10%;
  height: 100px;    
  position: relative;
}
p {
  position: absolute;
  bottom: 0;
}

Code pen here. 代码笔在这里。

---

#6楼

Try This 试试这个

 .content { display: flex; flex-direction: column; height: 250px; width: 200px; border: solid; word-wrap: break-word; } .content h1 , .content h2 { margin-bottom: 0px; } .content p { flex: 1; } 

  
 
heading 1
 
heading 2
 
Some more or less text
 Click me