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

Всем привет.

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

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

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

Хотелось бы конечно 1 вариант использовать, чтоб доп див не делать для бордера.
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
wapster92
@wapster92 Куратор тега CSS
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Дело в том, что при ширине блоков 25% - 20px отступы между блоками 20 пикселей. Следовательно border по одному пикселю дополнительно съедят 8 пикселей.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы