Display: flex; универсальные блоки с отступами, проблема адаптации и отсупов, как исправить?

Question

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

Универсальный адаптивный метод блоков.

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

4 блока в ряд стоит. Они могут быть разные один 25%, другой 20%, еще один 30% и еще один 25%.
При адаптации, когда я дисплай флекс делаю в flex-wrap: wrap;, и у блоков меняю width 50%, ставлю чтобы в линию не 4 блока было, а 2, ну и у второго блока убираю отступ margin-right: 0;, у меня не становятся из-за отступов блоки в линию, уже проверял, если убрать отступы то все становиться, бох сизе не помогает тож.

Я вроде как-то решал данный вопрос, но не помню как.
Может кто знает и подскажет?

Вот что я реализовал:
https://jsfiddle.net/vg1ct64m/5/

Answer 1

[Андрей Федоров]

https://jsfiddle.net/xj0nacry/

Comments

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

Ну такой вариант, чисто задаем фиксированные размеры для всех блоков width: calc((100% - 30px) / 2);
а если я хочу сделать один блок 40% другой 60%, как быть тогда?

[Андрей Федоров]

Антон Вебсайтовский, :nth-child(even)/:nth-child(odd)

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

Андрей Федоров, не совсем понял.

[Андрей Федоров]

Антон Вебсайтовский, это псевдоселекторы четных и нечетных блоков. Одному даете ширину 40%, второму 60%.

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

Андрей Федоров, Ага я понял, первому и последнему, а если 3 блока или 4. и если есть второй ряд.

[Андрей Федоров]

Антон Вебсайтовский, это не первый и последний, а все четные и нечетные. Если у вас будет 2 столбца - проблем не будет.