SteveRoad
@SteveRoad

Как выровнять содержимое карточки товара?

Решил создать карточку товара и при уменьшении экрана увидел, что цены находятся на разном уровне.
Пытался использовать align-self и justify, но ничего не получается. Как это можно сделать?

5ed0807a97149084743012.png

<div class="season-page">
            <div class="season-block">
                <img class="season-block_photo" src="../img/season/window_deflectors.jpg" alt="Дефлекторы_окон_(ветровики)">
                <div class="season-block_title">Дефлекторы окон (ветровики)</div>
                <div class="season-block_price">800-900 &#8381;</div>
            </div>
            <div class="season-block">
                <img class="season-block_photo" src="../img/season/hood_deflectors.jpg" alt="Дефлекторы_капота">
                <div class="season-block_title">Дефлекторы капота</div>
                <div class="season-block_price">800-1450 &#8381;</div>
            </div>
</div>


SASS:

.season
    padding-top: 50px
    &-page
        display: flex
        flex-wrap: wrap
        justify-content: space-around
        text-align: center
    &-block
        display: flex
        flex-direction: column
        flex-basis: 300px
        max-width: 300px
        background-color: #f5f5f5
        border-radius: 30px
        margin-bottom: 30px
        &_title
            color: #000
            font-family: "Blogger Sans-Bold"
            font-size: 30px
            margin: 0
            padding-bottom: 15px
        &_photo
            max-width: 300px
            max-height: 240px
            border-top-right-radius: 30px
            border-top-left-radius: 30px
        &_price
            color: #ff0000
            font-family: "Blogger Sans-Bold"
            font-size: 30px
            margin: 0
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
@DaBags
Если правильно Вас понял, то для цены укажите
1 вариант:
margin-top: auto;

2 вариант:
display: flex;
flex-grow: 1;
justify-content: center;
align-items: flex-end;

3 вариант (для заголовка укажите):
flex-grow: 1;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы