Html 将元素（弹性项目）固定到容器底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33114716/
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
Pin element (flex item) to bottom of container
提问by anthony-dandrea
I have a container to be the full window height/width. Inside this container I want a form that's vertically & horizontally centered. Below, I also want a piece of copy on the bottom baseline of the container. Similar to the shitty illustration below. Right now I am only able to have them both centered vertically and can't find a nice way to make the bottom copy pin itself to the bottom of the container.
我有一个容器是完整的窗口高度/宽度。在这个容器内，我想要一个垂直和水平居中的表格。下面，我还想要在容器底部基线上的一份副本。类似于下面的糟糕插图。现在我只能让它们都垂直居中，并且找不到一种很好的方法将底部复制销本身固定到容器的底部。
---------
| |
| |
|<form> |
| |
|<copy> |
---------
.container {
background-color: #eee;
height: 100vh;
width: 100vw;
padding: 1em;
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
form {
}
.bot {
align-self: flex-end;
}<div class="container">
<form>
<input type="text" />
<button type="submit">submit</button>
</form>
<p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>回答by chazsolo
Updated Answer
更新答案
With auto marginsyou can group or pack flex items together without extra markup, or shift elements around by applying a margin in the opposite direction (as seen in my original answer). In this case, simply set margin: autoon the form; this will inform the flex container to center the form within all available space remaining:
使用自动边距，您可以在没有额外标记的情况下将 flex 项目组合或打包在一起，或者通过在相反方向应用边距来移动元素（如我的原始答案所示）。在这种情况下，只需margin: auto在表单上设置即可；这将通知 flex 容器在所有剩余可用空间内将表单居中：
.flex-container {
display: flex;
flex-direction: column;
text-align: center;
height: 150px;
width: 400px;
background: #e7e7e7;
}
form {
margin: auto;
}
p {
margin: 0;
}<div class="flex-container">
<form>
<input type="text" />
<button type="submit">submit</button>
</form>
<p class="bot">
Lorem ipsum dolor sit amet
</p>
</div>See the other answers here for more insight:
请参阅此处的其他答案以获取更多见解：
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
在 CSS Flexbox 中，为什么没有“justify-items”和“justify-self”属性？
Can't scroll to top of flex item that is overflowing container
Original Answer
原答案
A clever way to "pin" a flex child is to give it an automargin in the direction opposite of where you want it to go. In your case, you'd want to set
“固定”一个 flex child 的一个聪明的方法是auto在你想要它去的方向相反的方向上给它一个边距。在你的情况下，你想设置
p.bot {
margin-top: auto;
}
and the paragraph will shift to the bottom of the parent flex container. It works pretty well with simple layouts such as this...
并且段落将移动到父 flex 容器的底部。它适用于像这样的简单布局......
html,
body {
margin: 0;
padding: 0;
}
.container {
background-color: #eee;
height: 100vh;
width: 100vw;
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
position: relative;
}
form {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.bot {
margin-top: auto;
}<div class="container">
<form>
<input type="text" />
<button type="submit">submit</button>
</form>
<p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>EditNote, I've also made the forma nested flexbox within the .containerand set it's height to 100%, which is basically doing the same thing. Michael_B has a good explanation in the comments.
编辑注意，我还在 中创建了form一个嵌套的 flexbox.container并将其高度设置为 100%，这基本上是在做同样的事情。Michael_B 在评论中有很好的解释。
回答by Stickers
You can create a pseudo element by using :beforeon the container, to make it as three sections, and use justify-content: space-between;
您可以通过:before在容器上使用创建一个伪元素，使其成为三个部分，并使用justify-content: space-between;
* {
margin: 0;
}
.container {
background-color: #eee;
height: 100vh;
width: 100vw;
display: flex;
justify-content: space-between;
flex-direction: column;
text-align: center;
}
.container:before {
content: '';
}<div class="container">
<form><input type="text" /> <button type="submit">submit</button></form>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>回答by Michael Benjamin
Here's the problem you're having:
这是您遇到的问题：
You have set the flex-directionto column. That means you've shifted the main axis to vertical, and the cross axis to horizontal.
您已将 设置flex-direction为column。这意味着您已将主轴移动到垂直方向，将横轴移动到水平方向。
The align-*properties work along the cross axis. So when you're telling .botto align-self: flex-end, you're actually telling it to shift right, not down.
这些align-*属性沿交叉轴起作用。所以当你告诉.botto 时align-self: flex-end，你实际上是在告诉它向右移动，而不是向下移动。
But it will not shift right in this case because the item is occupying the full width of the container and, therefore, has no space to move. However, if you limit it's width... http://jsfiddle.net/t7hap87o/
但是在这种情况下它不会右移，因为项目占据了容器的整个宽度，因此没有空间可以移动。但是，如果您限制它的宽度... http://jsfiddle.net/t7hap87o/
In wanting to pin <copy>to the bottom of the screen, flexbox has a bit of a limitation: There is no property similar to align-selffor the main axis.
为了固定<copy>到屏幕底部，flexbox 有一个限制：没有类似于align-self主轴的属性。
There are several other options to get the job done. You can nest flexboxes in the current container, or remove .botfrom this container and place it in another.
还有其他几种方法可以完成工作。您可以在当前容器中嵌套 flexbox，或者.bot从该容器中移除并将其放置在另一个容器中。
Flexbox also allows for absolutely-positioned flex children. Try this:
Flexbox 还允许绝对定位的 flex children。尝试这个：
.container {
position: relative; /* establish nearest positioned ancestor for abs. positioning */
}
.bot {
position: absolute;
bottom: 0;
}
Note: A margin-top: autoon .botwon't work in the current HTML structure. It would, in fact, pin the target element to the bottom. But it would also shove the centered element all the way to the top.
注意： A margin-top: autoon.bot在当前的 HTML 结构中不起作用。事实上，它会将目标元素固定在底部。但它也会将居中的元素一直推到顶部。
回答by misterManSam
The align-self: flex-end;doesn't have the desired affect, because the flex children are lined up as columns.
在align-self: flex-end;没有希望的影响，因为柔性孩子一字排开为列。
One easy way to line this up as desired, without adding any extra markup, is to:
根据需要进行排列而不添加任何额外标记的一种简单方法是：
move the footer element out of the
.container<div class="container"></div> <p class="bot"></p>give the body (or another wrapper, if required)
display: flexso that the.containerand footer are flex children (siblings).give
.containera flex property offlex: 1 1 100%;. This will cause it to grow and shrink from its initial value of 100%. The footer is pushed down, but its height is accommodated for when the container shrinks.give the footer a flex property of
flex: 1 1 auto. This will now be pushed down the bottom, but will increase height with more contents.
将页脚元素移出
.container<div class="container"></div> <p class="bot"></p>给正文（或另一个包装器，如果需要）
display: flex，使.container页脚和页脚是 flex 子项（兄弟姐妹）。给出
.container一个 flex 属性flex: 1 1 100%;。这将导致它从其初始值 100% 增长和缩小。页脚被向下推，但当容器收缩时，它的高度可以适应。给页脚一个 flex 属性
flex: 1 1 auto。现在这将被推到底部，但会随着更多的内容增加高度。
Read more about the flex property over on the MDN.
Example
例子
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
.container {
display: flex;
flex: 1 1 100%;
flex-direction: column;
justify-content: center;
text-align: center;
background: #EEE;
}
.bot {
flex: 1 1 auto;
text-align: center;
background: #EEE;
padding: 1em;
}<div class="container">
<form>
<input type="text" />
<button type="submit">submit</button>
</form>
</div>
<p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>回答by ratherblue
Change the flex-directionback to column, set one of the containers to width: 100%and use flex-wrap: wrapto achieve this.
将flex-direction返回更改为column，将其中一个容器设置为width: 100%并使用flex-wrap: wrap以实现此目的。
Something like this (and it will work in Firefox and IE 10+ with vendor prefixes):
像这样的东西（它可以在带有供应商前缀的 Firefox 和 IE 10+ 中工作）：
.container {
background-color: #333;
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
}
.footer {
width: 100px;
height: 20px;
margin-top: -20px; /* set the margin top to negative what the
height is so the form is perfectly centered */
background-color: #900;
color: #fff;
text-align: center;
}
.form-wrapper {
width: 100%; /* needs to be 100% to force the items to wrap */
height: 50px;
background-color: #009;
/* center the form inside the wrapper */
display: flex;
align-items: center;
justify-content: center;
}<div class="container">
<div class="form-wrapper">
<form>
<input type="text">
<button type="submit">submit</button>
</form>
</div>
<div class="footer">footer content</div>
</div>