Flex блоки акций, как убрать у последних блоков в строке отступ?

Question

[Антон Вебсайтовский]

Всем привет.
Сделал блоки на флекс адаптивные для раздела акции.
Будет не одна акция, вот решил реализовать через блоки.

Применил отступы у блоков, как убрать отступ у последнего блока ! и у остальных последних.
Пробовал это сделать через: nth-child(4n), но чет не срабатывает.

Может отступ как-то можно еще организовать, не добавляя доп див в котором стиль отступа маргин.

Рабочий пример блоков:
https://jsfiddle.net/ad36w0u8/1/

Answer 1

[Антон Усачев]

Для таких макетов логично было бы использовать грид вместо флекс. И отступы сразу убираются.



Ну а уж если нужен именно прямо вот флекс, то вот так можно:

Comments

[Антон Вебсайтовский]

Можно не только на грид делать, но грид это новая фишка, хотя давно уже ! она не везде будет срабатывать.
а вот флекс это другое дело.

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

[Антон Вебсайтовский]

Второй вариант из моего примера, ну да, чет такое можно сделать. Я об этом думал, меня больше интересует почему nth-child(4n) не срабатывает.

[Антон Усачев]

Антон Вебсайтовский, я могу объяснить зачем.
В 99 процентах рабочих (не учебных и или тренировочных) проектов в блок с картинкой лезет еще оверлей, а иногда там может быть вместо картинки видео с целым рукописным плеером. А в блок с заголовком часто попадают какие-нибудь декорации на псевдоэлементах или живых блоках. Кроме того, в моих проектах заголовок, стоящий последним, не имеет нижнего отступа, а так как этот заголовок не в тексте, а в блоке, то и не имеет.
Это опыт и просто хорошая привычка. К тому же так код лучше читается, имхо.

И да, грид – не новая фишка, распространен почти так же широко, как флекс.

[Антон Усачев]

Антон Вебсайтовский, потому что блок akk находится в блоке akb, т.е. он тупо всегда в этом блоке один и не может быть четвертым...
И да, это плохой тон, давать внешний отступ блоку с помощью его дочернего блока. )

[Nikolay Matyushkin]

Антон Вебсайтовский, в вашем примере nth-child сработает тогда, и только тогда, когда в каждом блоке с классом .akb будет как минимум 4 блока с классом .akk. Тогда к каждому 4-му блоку с классом .akk применится указанный Вами

.akk:nth-child(4n) {
  margin-right: 0;
}

[Антон Вебсайтовский]

Антон Усачев, с чего бы это был плохой тон. через эти стили nth-child и т.д, подобные, можно задавать свой стиль блоку ! не применяя доп стили в дивах.

[Антон Усачев]

Антон Вебсайтовский, я про то, что в указанном примере .akk имеет внешний отступ в 40px, при этом находясь в блоке .akb и "отталкивая" этим своим отступом соседний .akb
Так делать настоятельно не рекомендуется.

Answer 2

[Nikolay Matyushkin]

Предлагаю такой вариант вашего решения.

Я убрал margin у класса akb и добавил padding: 10px по оси x. Далле указал ширину не грубо 25%, как у вас, а с помощью функции calc, в которой произвёл расчёт ширины всех блоков. Взял 100% всей страницы, поделил её на количество нужных нам блоков в строке (4) и вычел 20 - это padding, который указал ранее (я указывал по 10px слева и справа).

Comments

[Антон Вебсайтовский]

Ага, думал тож об этом width: calc(100% / 4 - 20px);
Ток не пойму как правильно рассчитывать, допустим я хочу 40px отступ сделать снизу и справа.

[Антон Вебсайтовский]

100% - если сделать 4 блока в ряд, это каждый блок 25%.
А как паддинг вычитать, у меня чет ни когда особо не выходило )
Это что надо понять сколько 40px, будет в процентах и потом уже вычесть из 100% ?

[Антон Усачев]

calc такая же "новая" технология, как и grid.

[Антон Вебсайтовский]

Антон Усачев, это я знаю, просто обычно пишут что грид лучше не использовать чтобы потом проблем не было. вот и не использую.

[Nikolay Matyushkin]

Антон Вебсайтовский, в calc указываем сумму правого и левого padding-а, которые указали в классе блоков, чью ширину хотим расчитать. Верхние и нижние нас не интересуют.

В случае, если хотим указать 40px снизу и справа, тогда ширина этого блока будет calc(100% / 4 - 40px), т.к. слева у нас 0px, а справа 40px

[Nikolay Matyushkin]

Антон Усачев, да, я вкурсе, но к чему вы это?)

[Антон Усачев]

Devilz_1, это наш флейм с автором вопроса. Он топит за устаревшие технологии. Ознакомиться можно в комментариях под моим ответом выше. =)

[Антон Вебсайтовский]

Devilz_1, так и сделал ! но вышло как-то не так https://jsfiddle.net/Le63nfc0/

[Антон Вебсайтовский]

Антон Усачев, я не совсем за устаревшие топлю, а те что будут на большинство браузерах работать, у меня сайт на флексах все дела, по этому я все на флексах стараюсь делать.

[Nikolay Matyushkin]

Антон Вебсайтовский, ну вы в консоли то хоть гляньте, как вы padding-и расставили. У вас по 40px слева и справа. В таком случае в calc вам не 40, а 80 надо вычитать.

[Антон Вебсайтовский]

Devilz_1, забыл в конце ноль.
мне справа нужно чтобы шли отступы.

padding: 0 40px 40px 0;

ну вот: https://jsfiddle.net/Le63nfc0/1/
и все равно не ровно )

[Антон Вебсайтовский]

Вот рабочий пример: https://jsfiddle.net/Le63nfc0/2/
Но что я заметил, если сжимать браузер, ну эмитировать более маленькое разрешение экрана, то отступы больше становятся, почему так?

Вот присмотритесь когда разрешение браузера туда сюда сжимаете.

[Nikolay Matyushkin]

Антон Вебсайтовский, это потому, что размер блока указывается в процентах, а отступ указывается в пикселях. Следовательно при масштабировании ширина блока варьируется от n% до x%, отступ всегда 40px.

Решение, отступ указать в процентах и вычитать в calc тоже проценты.

[Антон Вебсайтовский]

а как в процентах высчитать?
странно, тогда почему пишут везде не в процентах отступы, а в px или рем.

между прочим если отступы сделать в %, он они не будут фиксированные, а они будут сжиматься.
по этому и делают в px, чтобы отступ был фиксированный.

А вот и тест, отступ в %, https://jsfiddle.net/om4ncpur/
И что у нас получилось, не фиксировано, сжимается !

Я так понимаю ты так от фанаря придумываешь что-то в голове и не пробуешь ))

[Nikolay Matyushkin]

Антон Вебсайтовский, ты сначала объясни тогда чё тебе надо. Корректно. Последний пример, что ты скидывал, что в нём не так, лол?) Отступы резиновые, блоки резиновые, че ещё тебе нужно?

И раз уж на то пошло, ты бы не спешил то про адаптивные блоки в вопросе затирать))

[Антон Вебсайтовский]

Devilz_1, вопрос адаптации был не главной, допилить 5 минут. медиа вписать.
Вопрос был про отступы.

[Антон Вебсайтовский]

Если нужна адаптивная то вот: https://jsfiddle.net/w4euz5d2/

Answer 3

[Андрей]

.akb:nth-child(4n) .akk {
  margin-right: 0;
}

Comments

[Антон Вебсайтовский]

Проверил на деле, https://jsfiddle.net/ad36w0u8/2/
Последние 4 блоки, чет они больше чем все остальные.
Это с таким вариантом, не могу понять что с ними не так.

Answer 4

[Антон Вебсайтовский]

Вот вариант: https://jsfiddle.net/Le63nfc0/2/
И еще один похожий: https://jsfiddle.net/Le63nfc0/3/

Забыл добавить медиа запросы, адаптивная версия:
https://jsfiddle.net/w4euz5d2/