我正在尝试使用Flexbox。这个链接展示了一些很好的对齐选项，但我实际上想要一个顶-顶-底的情况。
我想要一个div通过flexbox粘在父div的底部。使用flex-direction: column和align-content: Space-between可以实现这一点，但是中间的div将居中对齐，而我希望中间的div也能粘在顶部。
[顶部]
[中间]
-
-
-
[底部]
align-self: flex-end会使它浮动到右边，而不是底部。
完整的Flexbox文档：http://css-tricks.com/snippets/css/a-guide-to-flexbox/
虽然我有点晚到这个派对，但这对其他试图达成相同目标的人可能仍然相关：你应该能够做到以下事情：
margin-top: auto
关于问题元素，它应该移至底部。对于Firefox、Chrome和Safari来说，这个技巧应该可以解决。
auto 告诉浏览器在元素与其最近的兄弟元素之间尽可能地添加空白间隔。因此，margin-top: auto 的意思是，在元素和其最近的兄弟元素之间上方添加尽可能多的空白间隔。另一个例子，margin-left: auto 将元素推到最右边。 - CodeBiker基本上，答案是给中间元素的最后一个添加flex grow 1代码，如下所示：
.middle-last{
flex-grow: 1; // assuming none of the other have flex-grow set
}
谢谢，T04435。
我找到了自己的解决方案，为了文档价值，我将在此添加;
如果你给中间的块设置height: 100%，它将占据中间的所有空间。因此底部块将位于实际底部，而顶部和中间位于顶部。
更新：这在Chrome上不起作用...
更新：找到了适用于FF/Chrome的方法：为[middle]设置更高的flex-grow值（1就足够了），这将使其占据完整的中间大小。更多信息：http://css-tricks.com/almanac/properties/f/flex-grow/
flex-grow: 0，这意味着它们将确定自己的宽度，将最后一个项目之前的元素设置为 flex-grow: 1 将导致它填充容器中的可用空间，将最后一个项目推到底部/末尾。 - Sethalign-self属性依赖于项目在交叉轴上的对齐方式，而非主轴。因此这不是实现目标的方法。
你有几个选项可以使用flexbox来完成：
1）在中间项目上使用 flex-grow:1。这将使其扩展并占用容器中所有剩余的空间，从而将最后一个div推到底部。
2）重新设计布局，使其中一个主要的div具有justify-content:space-between属性，以便将最后一个div粘贴到底部：
.container{
display:flex;
flex-direction:column;
justify-content:space-between;
}
.body{
display:flex;
flex-direction:column;
}
.bottom{
/* nothing needed for the outer layout */
}
<div class="container">
<div class="body">
<div>top content</div>
<div>middle content</div>
</div>
<div class="bottom">
bottom content
</div>
</div>
3) 这有点奇怪，但你甚至可以使用align-self来反转弹性方向并允许项目换行：
.container{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.body{
display:flex;
flex-direction:column;
flex-basis:100%;
}
.bottom{
align-self:flex-end
}
<div class="site-container">
<header>your header</header>
<main>your main with little content</main>
<footer>your footer</footer>
</div>
CSS
.site-container{
min-height: 100vh; //not necessary to calculate the height of the footer
display: flex;
flex-direction: column;
}
footer{
margin-top: auto;
}
我知道这是一个旧帖子，但同样的问题，在Flexbox的单轴对齐方面，让我发疯了一个小时。
自动边距是一个不错的技巧，但我想分享我的解决方案，使用CSS Grid。
重要部分是定义grid-template-rows。 使用auto，行与内容具有相同的高度，而1fr将剩余空间用于中间行。
这里有一个关于CSS Grid的好概述： https://css-tricks.com/snippets/css/complete-guide-grid/
.container {
height: 700px;
display: grid;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
}
.top {
height: 30px;
width: 400px;
background-color: blue;
}
.middle {
width: 400px;
background-color: green;
}
.bottom {
height: 30px;
width: 400px;
background-color: red;
}<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>这是flexbox的限制，我们必须接受它。
以下是两个可尝试的替代方案：
div将[top] [middle]组合在一起，[bottom]组合在另一个div中。
同时，创建一个section并使用display flex，direction为column，justify-content为space-between来将它们一起覆盖。
PS：通过class/id应用CSS，我仅以section为例。
.message-container {
display: flex;
flex-direction: column;
place-content: flex-end;
height: -webkit-fill-available;
}
.message {
display: table-cell;
}
.container {
height: 400px;
}
.message-container {
display: flex;
background: #eee;
flex-direction: column;
place-content: flex-end;
height: -webkit-fill-available;
}
.user-message {
align-self: flex-start;
display: table-cell;
padding: 5px;
margin: 10px;
border-radius: 10px;
background-color: rgba(154, 247, 200, 0.692);
}
.friend-message {
align-self: flex-end;
display: table-cell;
padding: 5px;
margin: 10px;
border-radius: 10px;
background-color: rgba(169, 207, 250, 0.692);
}<div class='container'>
<div class='message-container'>
<div class='user-message'>Hello!</div>
<div class='friend-message'>Hi.</div>
</div>
</div>你可以不使用 flex box，像这样：
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
flex-end在行或列模式下有不同的结束位置。行的末尾（底部）或列的末尾（右侧）。 - Laurens Kling