Как онулить отступпы у последних элементов в flex контейнере?

Question

[Сергей Ганжела]

Доброго время суток!
Есть flex container в нём карточки в каждой линии их по 4 штуки нужно обнулить margin-bottom для последних элементов, если конечное количество элементов фиксировано то как бы все понятно, а вот как быть если в последнем ряду может быть 1 или 2 или 3 или 4 карточки предполагалось использовать nth-child и nth-last-child
сейчас когда в шаблоне фиксированное количество 8 использую

.advantages-item:not(:nth-last-child(-n+4)) {
    margin-bottom: 23px;
}

но при добавление еще одной, двух или трёх карточек вёрстка плывет!
Заранее благодарен!

Comments

[Froggyweb]

по простому - использовать gap вместо margin С флексами чуть хуже, а в паре с grid поддержка стремится к 100%
как вариант не использовать :nth, а делать отрицательный марджин у обертки, но это такое....

[Сергей Ганжела]

Froggyweb, Спасибо по условию надо пока flex использовать, в моём случае элементы расположены внутри секции у неё тоже есть боттом между секциями, я решил не убирать боттомы у элементов уменьшил боттом у сомой секции в суме получился необходимый боттом между секциями!
Спасибо за ответ!

[FrelFrloich]

Сергей Ганжела, загрузи в песочницу, ты вырвал из контекста хз что у тебя там.

[Ankhena]

1. Если позволяет ТЗ по поддерживаемым браузерам, можно использовать row-gap.
2. Можно заменить нижний margin для последних на верхний у первых 4х - это гораздо логичнее.
3. Если всё же хочется развлекаться, то вот вам статья https://css-live.ru/articles/resheno-s-pomoshhyu-c...
На её основе напишите nth-child для нужных вам элементов в зависимости от того, сколько их в последней строке.

[Сергей Ганжела]

FrelFrloich, Согласен с тобой! провтыкал по одной строчке фиг поймёшь что там у меня! Закрываем вопрос!

Answer 1

[FeST1VaL]

А если не боттом давать, а топ. Тогда вы можете убирать топ у первых 4.

Comments

[Сергей Ганжела]

Спасибо в моём случае элементы расположены внутри секции у неё тоже есть боттом между секциями, я решил не убирать боттомы у элементов уменьшил боттом у самой секции в суме получился необходимый боттом между секциями! а маржин топ вроде как по бем не приветствуется. Спасибо за ответ!

[Ankhena]

Сергей Ганжела, БЭМу без разницы где у вас margin, сверху или снизу. Блок не должен знать о своей внешней геометрии. А элемент может.

Итого, поменять нижний на верхний - одно из самых разумных решений.

[Сергей Ганжела]

Ankhena, За статейку спасибо! буду смотреть