Как работает margin-top: auto? не могу прибить текст к низу, хотя у родителя высоту большую указал, или надо что то еще делать?
1 ответ
Для начала нужно растянуть карточки на всю высоту.
Для этого родителю карточек назначаем следующие правила.
.cards {
display: flex; /* Используем флексбокс */
align-items: streach; /* streach будет растягивать */
}
А самим карточкам выставить
.card {
display: flex; /* Опять же флексбокс */
flex-direction: column; /* Порядок содержимого - column (друг под другом) */
height: auto; /* auto - растянет на всю высоту родителя */
}
А теперь уже нужному элементу можно задать margin-top: auto;
, чтобы он прижался к низу карточки.
Демо:
.cards {
display: flex;
flex-direction: row;
justify-content: center;
align-items: streach;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
height: auto;
}
.card:not(:last-child) {
margin-right: 20px;
}
.card__circle-progress,
.card__gradient-text {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
margin: 0 auto 20px;
}
.card__circle-progress {
border: 2px solid #ccc;
border-radius: 50%;
font-size: 40px;
font-weight: bold;
}
.card__gradient-text {
font-size: 70px;
font-weight: bold;
color: orange;
}
.card__text {
display: block;
width: 100%;
text-align: center;
text-transform: uppercase;
font-size: 20px;
margin-top: auto;
}
<div class="cards">
<div class="card">
<div class="card__circle-progress">9 лет</div>
<div class="card__text">Репутация проверенная временем!</div>
</div>
<div class="card">
<div class="card__gradient-text">3 715</div>
<div class="card__text">Более чем 3000 довольных клиентов по всей России</div>
</div>
<div class="card">
<div class="card__circle-progress">7 000 +</div>
<div class="card__text">Тренажеров установлено в коммерческих и частных тренажерных залах</div>
</div>
</div>
display: flex
.