Html 使用 flexbox 将元素与底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31000885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align an element to bottom with flexbox
提问by supersize
I have a divwith some children:
我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>
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 pI want to stick the .buttonalways at the bottom without taking it out of the flow. I've heard this can be achievable with Flexbox but I can't get it to work.
无论文本中有多少，p我都想将.button始终放在底部而不将其从流程中取出。我听说这可以通过 Flexbox 实现，但我无法让它工作。
回答by Oriol
You can use auto margins
您可以使用自动边距
Prior to alignment via
justify-contentandalign-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;
}<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 agrow 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;
}<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>回答by Roumelis George
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:
最好的办法是将 position: absolute 设置为按钮并将其设置为bottom: 0，或者您可以将按钮放在容器外并使用负数transform: translateY(-100%)将其放入容器中，如下所示：
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
Check this JSFiddle
检查这个JSFiddle
回答by Timo
The solution with align-self: flex-end;didn't work for me but this one did in case you want to use flex:
解决方案align-self: flex-end;对我不起作用，但是如果您想使用 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;
}<div class="content">
<div class="upper">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>paragraph text</p>
</div>
<div class="bottom">
<a href="/" class="button">link button</a>
</div>
</div>回答by Sanjay Shr
Not sure about flexbox but you can do using the position property.
不确定 flexbox，但您可以使用 position 属性。
set parent divposition: relativeand child element which might be an <p>or <h1>etc.. set position: absoluteand bottom: 0.
设置父divposition: relative元素和子元素，它们可能是一个<p>或<h1>等等。设置position: absolute和bottom: 0。
Example:
例子：
index.html
索引.html
<div class="parent">
<p>Child</p>
</div>
style.css
样式文件
.parent {
background: gray;
width: 10%;
height: 100px;
position: relative;
}
p {
position: absolute;
bottom: 0;
}
回答by ferit
<section style="display:flex; flex-wrap:wrap;">
<div style="display:flex; flex-direction:column; flex:1;">
<button style="margin-top: auto;"/>
</div>
<div style="display:flex; flex-direction:column; flex:1;">
<button style="margin-top: auto;"/>
</div>
</section>
回答by mohxn ayaz
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;
} <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>回答by aj go
I just found a solution for this.
我刚刚找到了解决方案。
for those who are not satisfied with the given answers can try this approach with flexbox
对于那些对给出的答案不满意的人，可以使用 flexbox 尝试这种方法
CSS
CSS
.myFlexContainer {
display: flex;
width: 100%;
}
.myFlexChild {
width: 100%;
display: flex;
/*
* set this property if this is set to column by other css class
* that is used by your target element
*/
flex-direction: row;
/*
* necessary for our goal
*/
flex-wrap: wrap;
height: 500px;
}
/* the element you want to put at the bottom */
.myTargetElement {
/*
* will not work unless flex-wrap is set to wrap and
* flex-direction is set to row
*/
align-self: flex-end;
}
HTML
HTML
<div class="myFlexContainer">
<div class="myFlexChild">
<p>this is just sample</p>
<a class="myTargetElement" href="#">set this to bottom</a>
</div>
</div>
