Flexbox 底部对齐答案

【问题标题】：Flexbox align to bottomFlexbox 底部对齐
【发布时间】：2016-03-08 22:30:27
【问题描述】：

我有以下布局http://jsbin.com/joyetaqase/1/edit?html,css,output

<div class="row">

    <div class="col">
      <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
      <p>my footer</p>
    </div>

     <div class="col">
      <h2>Lorem Ipsum.</h2>
      <p>my footer</p>
    </div>

  </div>

使用 flexbox 我试图使 .col div 具有相同的高度和宽度。

我的问题是：我怎样才能把<p> 贴在盒子的底部？

布局应如下所示：

我知道我可以将 <p> 设为绝对值并使用 bottom:0; 但我想用 flexbox 来实现，这可能吗？

谁能解释一下？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以按照以下方式进行。给display: flex;flex-direction: column;给 .col 和 flex: 1 0 auto; 到 h2

.row {
  width: 500px;
  font-family: monospace;
  display:flex;
}

.col {
  width: 50%;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
    flex-direction: column;
}

h2, p {
  font-weight: normal;
  margin: 0;
}

h2 {
    flex: 1 0 auto;
}

 <div class="row">
    
    
    <div class="col">
      <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
      <p>my footer</p>
    </div>
    
     <div class="col">
      <h2>Lorem Ipsum.</h2>
      <p>my footer</p>
    </div>
    
    
  </div>

Updated JSBin

【讨论】：

@Hiero 很高兴为您提供帮助。不要忘记接受答案。什么时候可以

【解决方案2】：

使.col 成为嵌套的、列方向的弹性容器。

.col {
  width: 50%;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;

  /* NEW */
  display: flex;
  flex-direction: column;          /* stack <h2> and <p> vertically */
  justify-content: space-between;  /* align <h2> at top and <p> at bottom */
}

【讨论】：

【解决方案3】：

给父母（.col）相对定位，然后给页脚绝对定位，属性bottom:0px;。

JSBin

.col {
  width: 50%;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  position:relative;
}

p{
  position:absolute;
  bottom:0px;
}

【讨论】：