垂直对齐在与底部对齐的页脚相同的高度弹性盒子

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>