Вертикальное выравнивание в гибких коробках одинаковой высоты с нижним нижним колонтитулом

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>