Flex и border, вытягивание блоков по вертикали, как реализовать?

Question

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

Всем привет.

Сделал блоки, через flex: 0 0 calc(25% - 20px);, но если туда же пихать бордер, то в ряд идет не 4 блока, а 3, то есть идет перенос, и тогда я решил сделать еще див но внутри и применить ему бордер, все вышло и в ряд 4 блока, у блоков разной длины контент и блоки не растягиваются, что с этим делать?

А реально ли доп блок для бордер не делать? (но чтобы в ряд 4 блока вошло, а то с flex: 0 0 calc(25% - 20px), перенос идет блоков. вот пример что выходит (так все блоки одной высоты): https://jsfiddle.net/jnmb2s48/6/
Так все ровно, и див доп не надо клепать для бордера, но переносит блок один


Вот пример с доп дивом для бордера, где блоки не все одной высоты:
https://jsfiddle.net/jnmb2s48/8/


Хотелось бы конечно 1 вариант использовать, чтоб доп див не делать для бордера.

Answer 1

[WapSter]

Comments

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

о, елки палки ) box-sizing: border-box;, яж хотел попробовать так ) ну да ладно ) спасибо.

Answer 2

[Никита Михайлов]

Дело в том, что при ширине блоков 25% - 20px отступы между блоками 20 пикселей. Следовательно border по одному пикселю дополнительно съедят 8 пикселей.

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

Ещё вариант убрать margin вообще и использовать justify-content

Comments

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

ну вообще да, логически я тож так думал, раз бордер добавляет 1 px с одной стороны, а у блока выходит лево и право, это 2px у одного блока, а их 4, и того 8px, я я пробовал и чет не вышло.

justify-content так он же не делает отступы или я чет не знаю.