Как схлопнуть границы у flex-элементов?

Question

[Muvka]

Нужно сделать границу в 1px у рядом стоящих блоков

Answer 1

[Ankhena]

Задавайте им по одной границе.
https://jsfiddle.net/kjm80uso/

Comments

[Muvka]

Надоест адаптировать потом)

[Ankhena]

Muvka, эммм... что именно там адаптировать, что не адаптируется автоматом?

[Ankhena]

Muvka, вот для некратного количества блоков https://jsfiddle.net/xgwy5fuL/
ничего не изменилось кроме количества блоков.

[Muvka]

ну у первой строки нужно верхние бордеры прописывать. и у всех левых элементов - левый

[Ankhena]

Muvka, вы пример-то посмотрите
верхний и левый пишутся у родителя, а не у детей
у детей всегда только нижний и правый

сколько бы их ни было

в вашем примере для изменения толщины границы надо еще голову на бок наклонить и пересчитать calc

[Muvka]

наклонять голову не надо, а calc считается очень легко. Но спасибо и за ваш способ)

[Ankhena]

Muvka, calc считается легко, если его писать разумно, а не сначала умножать компенсацию лишней границы на 3, а потом обратно делить на 3 )))))
И до тех пор, пока вы лично помните откуда взялась эта формула или пока не пришел другой человек поддерживать этот calc.
33.33% + 1px
и для 4 столбцов тогда будет 25% + 1px, что в общем-то тоже понятно, особенно при наличии рядом margin -1px.
Тогда и переменную можно будет использовать для толщины границы и в вашем решении.

Answer 2

[Muvka]

Вот такой способ в голову пришел
flex-shrink: 1
flex-grow: 1
flex-basis: calc((100% + 3px) / 3)
max-width: calc((100% + 3px) / 3)
margin: -1px -1px 0 0