Flex карточка одинаковая высота - Web-Global: Связывая миры через веб-технологии
Web-Global

Flex карточка одинаковая высота

Пост опубликован 12 октября 2021 в 10:11 и находится в рубриках Flex, HTML&CSS. 218
Поделиться:

родительский блок:

      {
        display: flex;
	flex-direction: column;
	flex-basis: 24%;
	
	min-height: 420px;
	width: 100%;
	box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
	background-color: #ffff;
	position: relative;
	border-radius: 8px;
	
     }

Основное текст и информации 
{ flex-grow: 1; }

Нижний блок ( footer, btn и.т.д )

{ flex-shrink: 0; }

У вас в HTML должен получится так:

<div родительский блок>
 <div> img </div>
 <div основное тексты> main </div>
 <div нижний блок> btn </div>
</div>