Загрузка...Основной момент, демонстрируемый здесь — это использование CSS-свойства justify-content: space-between, которое размещает первый и последний дочерние элементы по краям контейнера, а оставшееся пространство равномерно распределяется между остальными элементами. Контейнер карточки использует режим отображения flexbox, а направление его содержимого с помощью flex-direction: column устанавливается по вертикали.
Заголовок, описание и блок изображения выстраиваются в вертикальный столбец внутри контейнера карточки. Затем применение justify-content: space-between привязывает первый (заголовок) и последний (блок изображения) элементы к верхнему и, соответственно, нижнему краям карточки, а текст с описанием располагается равномерно между ними.
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}