Проблема с отступами?

Question

[survivor2005]

Уважаемые знатоки, подскажите некчемному. Вопрос такой. Возможно ли как то не прибегая мобильной вёрстке и js сделать следующее: Есть допустим контент из 2 или 3х колонок. У родителя задан display flex, что бы колонки встали в ряд ну и wrap, что автоперенос работал. Есть заранее заданные поля в % у странице, типа внутреннего паддинга, так сказать для окантовки. Я задаю отступы между колонками, допустим тем же паддингом. Допустим первой и второй колонке задаю паддинг-райт 20px для отступов между колонками. И естественно когда блоки начинают переходить на новую строку при уменьшении ширины окна, то паддинга остаются и смотрится это не хорошо. У меня лишь одно решение в голове, типа медия запросами обнулять паддинга при определённом размере окна, но это так не стабильно. Как только что то изменится в размерах колонки или общего блока, то все опять вернётся. Кто и как решает данную ситуацию. Спасибо. П. С. Я знаю что можно решить гридами, но побаиваюсь с совместимостью с браузерами.

Comments

[dollar]

Если отступы колонок между собой и между краем экрана должны быть равны, то паддинг-райт подходит (в сочетании с паддинг родителя).

[ProjectSoft]

обнуляете паддинги, а вторую колонку или первую колонку забываете растянуть.
Да и вообще ширину колонки лучше держать в процентах.
Если поддерживается браузером flex, то и функция calc() поддерживается. (Это подсказка)

[survivor2005]

Вот даю сайт, я его пока делаю, так что на мелочи не обращайте внимания. Там заметно что колонки в моб версии расширились автоматически, но паддинг он присутствует. https://skyorg.ru/dev/betonsnab/ А вот в гридах можно задать промежутки только между колонками и как только колонка сместилась на новую строку, то паддинг у неё исчезает. Я типа такого решения хотел. Просто у меня на странице внутренний паддинг он в процентах, что бы в моб версии уменьшить зазоры по краям автоматически. Поэтому я не могу теперь рассчитать паддинг между колонками, так как он там в пикселях.

[survivor2005]

Может конечно я плохо объясняю. Я бы созвонился с кем нибудь, если есть желание у кого. Сложно мне Обь яснять в тексте)

Answer 1

[Василий]

Задавать отступы между колонками нужно через margin.
Внутренним блока в колонках нужно задать свойство box-sizing: border-box;
Тогда ваши внутренние блоки не будут вываливаться из блоков при изменении размеров колонок.

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

Answer 2

[Полина Емельянова]

Дайте родителю отрицательный маргин, равный паддингу между колонками.

.parent {
  margin: 0 -20px;
}

childen {
  padding: 0 20px;
}

вот тут на класс showcase__list так повешено

https://codepen.io/emelyanova/pen/PLjpwz

Comments

[survivor2005]

Спасибо!!! Помогло!