Задать вопрос

Почему третья карточка не становиться в ряд?

С помощью calc знаю, что можно решить эту задачу, но не понимаю почему не становится в ряд если задать flex: 0 1 33.333%; (опыта в вёрстке мало).

<div class="latest-work">
                <div class="latest-work__container">
                    <div class="latest-work__items">
                        <div class="latest-work__item item">
                            <img src="img/1.png" alt="" class="item__img">
                            <div class="item__title">Project title</div>
                            <div class="item__subtitle">UI, Art drection</div>
                        </div>
                        <div class="latest-work__item item">
                            <img src="img/2.png" alt="" class="item__img">
                            <div class="item__title">Project title</div>
                            <div class="item__subtitle">UI, Art drection</div>
                        </div>
                        <div class="latest-work__item item">
                            <img src="img/3.png" alt="" class="item__img">
                            <div class="item__title">Project title</div>
                            <div class="item__subtitle">UI, Art drection</div>
                        </div>
                        <div class="latest-work__item item">
                            <img src="img/4.png" alt="" class="item__img">
                            <div class="item__title">Project title</div>
                            <div class="item__subtitle">UI, Art drection</div>
                        </div>
                        <div class="latest-work__item item">
                            <img src="img/5.png" alt="" class="item__img">
                            <div class="item__title">Project title</div>
                            <div class="item__subtitle">UI, Art drection</div>
                        </div>
                        <div class="latest-work__item item">
                            <img src="img/6.png" alt="" class="item__img">
                            <div class="item__title">Project title</div>
                            <div class="item__subtitle">UI, Art drection</div>
                        </div>
                    </div>
                </div>
            </div>

// Обнуление стилей
@import "_null.scss";
// Шрифты

[class*="__container"] {
    max-width: 618px;
    margin: 0px auto;
}

.latest-work {

    // .latest-work__container

    &__container {}

    // .latest-work__items

    &__items {
        display: flex;
        flex-wrap: wrap;
        column-gap: 12px;
        row-gap: 24px;
    }

    // .latest-work__item

    &__item {}
}

.item {
    // flex: 0 1 calc(100% / 3 - 12px * 2 / 3);
    display: flex;
    flex-direction: column;
    flex: 0 1 33.333%;
    

    // max-width: 159px;
    // .item__img

    &__img {
        margin-bottom: 12px;
    }

    // .item__title

    &__title {
        margin-bottom: 4px;
        font-size: 10px;
        font-weight: bold;
    }

    // .item__subtitle

    &__subtitle {
        font-size: 8px;
        font-weight: normal;
    }
}
  • Вопрос задан
  • 194 просмотра
Подписаться 1 Простой 5 комментариев
Пригласить эксперта
Ответы на вопрос 1
alsolovyev
@alsolovyev
¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
Видимо потому что при calc вы еще вычитаете отступы какие-то flex: 0 1 calc(100% / 3 - 12px * 2 / 3), а 33.333% это просто 100% / 3
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы