Flexbox的对齐底部

Question

我有以下布局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的实现这一目标，这可能吗？

有人可以解释一下吗？

Answer 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

Answer 2

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

JSBin

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

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

Answer 3

让.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 */ 
}