Flexbox将项目粘贴到底部

Question

我有以下布局。

<div class="container">
   <div class="content">          
       <div class="post">post</div>
       <div class="image">image</div>      
   </div>
   <div class="footer">footer</div>    
</div>

http://jsbin.com/xicatoq/4/edit?html,css,output

我想要达到的目的是让页脚粘到底部（我不想使用绝对定位）并从顶部到页脚进行.content拉伸，如下图所示

有人可以解释我是如何做到的吗？

Answer 1

在您的代码中，类content的div是一个flex容器。这使得子元素（.post和.image）变为项目。

但是，您的类container 的div不是 Flex容器。因此.content和.footer不是弹性项目，也不能接受弹性属性。

所以，第一步，添加：

.container {
     display: flex;
     flex-direction: column;
}

然后使用flex auto边距将页脚粘贴到容器的底部：

.footer {
    margin-top: auto;
}

这是完整的代码：

body {
  font-family: monospace;
  color: #fff;
  text-align:center;
}
.container {
  width: 100%;
  height: 800px;
  background: red;
  display: flex;          /* NEW */
  flex-direction: column; /* NEW */
}
.content {
  /* float: left; */
  width: 100%;
  display: flex;
  align-items: center;
}
.post {
  width: 70%;
  background: pink;
  line-height: 300px;
}
.image {
  width: 30%;
  height: 500px;
  background: green;
}
.footer {
  background: blue;
  line-height: 70px;
  text-align: center;
  /* float: left; */
  width: 100%;
  margin-top: auto;     /* NEW */
}

<div class="container">
   <div class="content">
       <div class="post">post</div>
       <div class="image">image</div>
   </div>
   <div class="footer">footer</div>
</div>

Revised Demo

请注意，我注释掉了花车。他们没有工作。 In a flex container floats are ignored.

在此处详细了解auto页边距：https://stackoverflow.com/a/33856609/3597276

Answer 2

请检查：http://jsbin.com/dojitevoye/edit?html,css,output

body {
  font-family: monospace;
  color: #fff;
  text-align:center;
}

.container {
  width: 100%;
  height: 800px;
  background: red;
}

.content {
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.post {
  width: 70%;
  background: pink;
  line-height: 300px;
  align-self: flex-start;
}

.image {
  width: 30%;
  height: 500px;
  background: green;
  align-self: flex-start;
}

.footer {
  background: blue;
  line-height: 70px;
  text-align: center;
  float: left;
  width: 100%;
  align-self:flex-end;
}

将.content类的高度设置为100％，这将取其父级的高度（.container），在这种情况下为800px。

现在将.post和.image与align-self: flex-start;

对齐父Flexbox的顶部

现在，类似地使用align-self:flex-end;

将.footer设置为flexbox的底部

Answer 3

只需使用height: 100%;到.content，就会让页脚粘到底部。

<强> Working JSBin