垂直對齊在與底部對齊的頁腳相同的高度彈性盒子

Question

我正在開發一個商場的網站，並且我有一張由名片和背景照片，商店說明和頁腳店鋪鏈接和分享按鈕。

所有的卡都有相同的高度，標題和背景圖像的標題在px中有一個固定的高度，而頁腳將在卡的底部。

到目前爲止，我已經很容易了，但是描述讓我感到非常緊張，因爲它們正在垂直居中，我希望它們只在標題下方。

我創建了一個小演示，以便更好地理解。

.container { 
 
    width: 90%; 
 
    min-width: 1000px; 
 
    margin: 0 auto; 
 
} 
 
.row { 
 
    display: flex; 
 
} 
 
.box-b { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-basis: 31.1%; 
 
    margin: 0 1.1% 1.1%; 
 
    border: 1px solid gray; 
 

 
} 
 
.box-header-b { 
 
    width: 100%; 
 
    display: flex; 
 
    padding: 16px; 
 
    height: 192px; 
 
    background-size: contain; 
 
    border: 1px solid red; 
 
} 
 
.box-title { 
 
    align-self: flex-end; 
 
} 
 
p { 
 

 
    background-color: red; 
 
    align-self: flex-start; 
 
} 
 
.box-b-actions { 
 
    width: 100%; 
 
    padding: 16px; 
 
    border: 1px solid #000; 
 
    align-self: flex-end; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="box-b"> 
 
     <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)"> 
 
      <h2 class="box-title">John</h2> 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio?</p> 
 
     <div class="box-b-actions"> 
 
      <a href="">Link to home</a> 
 
     </div> 
 
     </div> 
 
     <div class="box-b"> 
 
     <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)"> 
 
      <h2 class="box-title">Peter</h2> 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sint iste pariatur cupiditate aliquid nemo reprehenderit unde veritatis est, laboriosam assumenda fuga expedita nam optio porro ullam vitae deleniti culpa!</p> 
 
     <div class="box-b-actions"> 
 
      <a href="">Link to home</a> 
 
     </div> 
 
     </div> 
 
     <div class="box-b"> 
 
     <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)"> 
 
      <h2 class="box-title">James</h2> 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis,</p> 
 
     <div class="box-b-actions"> 
 
      <a href="">Link to home</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

在此先感謝，並期待一個解決方案:)

Answer 1

這個怎麼樣：

.container { 
 
    width: 90%; 
 
    min-width: 1000px; 
 
    margin: 0 auto; 
 
} 
 
    
 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
    
 
.box-b { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 31.1%; 
 
    margin: 0 1.1% 1.1%; 
 
    border: 1px solid gray; 
 
} 
 
    
 
.box-header-b { 
 
    width: 100%; 
 
    display: flex; 
 
    padding: 16px; 
 
    height: 192px; 
 
    background-size: contain; 
 
    border: 1px solid red; 
 
    box-sizing:border-box; 
 
} 
 
    
 
.box-title { 
 
    align-self: flex-end; 
 
} 
 
    
 
p { 
 
    flex-grow:1; 
 
    background-color: red; 
 
    margin: 0; 
 
} 
 
    
 
.box-b-actions { 
 
    box-sizing:border-box; 
 
    width: 100%; 
 
    padding: 16px; 
 
    border: 1px solid #000; 
 
    align-self: flex-end; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="box-b"> 
 
     <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)"> 
 
     <h2 class="box-title">John</h2> 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio?</p> 
 
     <div class="box-b-actions"> 
 
     <a href="">Link to home</a> 
 
     </div> 
 
    </div> 
 
    <div class="box-b"> 
 
     <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)"> 
 
     <h2 class="box-title">Peter</h2> 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio? Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Maxime sint iste pariatur cupiditate aliquid nemo reprehenderit unde veritatis est, laboriosam assumenda fuga expedita nam optio porro ullam vitae deleniti culpa!</p> 
 
     <div class="box-b-actions"> 
 
     <a href="">Link to home</a> 
 
     </div> 
 
    </div> 
 
    <div class="box-b"> 
 
     <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)"> 
 
     <h2 class="box-title">James</h2> 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis,</p> 
 
     <div class="box-b-actions"> 
 
     <a href="">Link to home</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>