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