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

Question

[Ян Уланов]

С помощью 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;
    }
}

Comments

[Ivan Ustûžanin]

потому что 100% это вся ширина, про гапы оно ничего не знает
да и если нужны 3 колонки, используйте гриды с их 1fr

[Ян Уланов]

Ivan Ustûžanin, То есть если решать с помощью флекса, то это только калк?

[Ivan Ustûžanin]

Ян Уланов, если с gap, то только calc(), ну или gap перенести внутрь flex-item в виде margin или padding
но это похоже на натягивание совы на глобус, ибо если нужны фиксированные колонки, то это grid, где контейнер задаёт раскладку, flex же хорош там, где контенту нужна свобода, чего в данном случае не наблюдается

[Ян Уланов]

Ivan Ustûžanin, Я понял, спасибо

[Wispik]

Ян Уланов, а в чем именно причина так усердно использовать флексы? У них сейчас с гридами в браузерах поддержка одинаковая. Это же просто придумывание себе проблем на ровном месте, ничего более

и небольшой оффтоп

// .item__img
  &__img {

серьезно, вот так лучше писать, чем просто .item__img {} ?

Answer 1

[Aleksey Solovyev]

Видимо потому что при calc вы еще вычитаете отступы какие-то flex: 0 1 calc(100% / 3 - 12px * 2 / 3), а 33.333% это просто 100% / 3

Comments

[Ян Уланов]

Да там row-gap есть и с помощью калк я их высчитываю просто. Поэтому и спрашиваю как решить это с помощью flex: 0 1 33.333%;. Чего-то не хватает, а чего понять не могу

[Aleksey Solovyev]

Ян Уланов, чего? Я, неверно, чего-то не понимаю. Вы должны вычесть отступы из ширины блока (ну либо руками считайте сколько это будет в процентах 33.333% - 12px * 2 / 3), чтобы уместить 3 блока в ряд. Потому что flex за вас считать не будет. Вы это делаете в 1 варианте и не делаете во в2. Чего вы еще понять не можете? Нет другого пути на flex. только отнимать отступы calc(33.3333% - 12px * 2 / 3).

Либо переписывайте на grid и используйте 1fr (repeat(3, 1fr))
Либо columns

[Ян Уланов]

Aleksey Solovyev, да я ставил отрицательный margin слева и справа блоку .latest-work__items