Как в flex сделать одинаковые отступы?

Question

[Ingernirated]

Всем привет!
Как сделать отступы между верхними и нижними блоками такими же, как и между ними щас по бокам с условием, что у нас будет between и высота auto?
https://jsfiddle.net/bd4Lygu5/

Answer 1

[Александр Маргинал]

Не могу посмотреть по телефону, но сделать высоту stretch и границы применять к внутренним элементам. В итоге расширяться будут все одинаково по высоте

Comments

[Ingernirated]

а можно пример? )

[Александр Маргинал]

<div class="row align-items-streatch">
<div class="col-4"><div class="card"></div></div>
<div class="col-4"><div class="card"></div></div>
<div class="col-4"><div class="card"></div></div>
</div>

Написал в духе бутстрапа для понятности, padding по горизонтали и margin для отступа по вертикали у col можно любые сделать. Только у row придется толк настроить margin по бокам.
Card внутри колонок имеет свою высоту любую

Answer 2

[ⓒⓢⓢ]

по идее это margin: 0 0 5% 0; для ".box"
30% * 3 блока = 90%, остальная 10% часть это отступ
10% / 2 отступа = 5% на один отступ

Comments

[Ingernirated]

а когда мы задаем отступ в %, он берет проценты от чего?
ширины или высоты блока?

[ⓒⓢⓢ]

Ingernirated, от ширины родительского блока

[Ingernirated]

JRK_DV, а можно как-то брать % от высоты блока при использовании их в margin-padding?

[ⓒⓢⓢ]

Ingernirated, процент margin-padding всегда берётся от ширины,
если нужен % от высоты, то тут нужно выкручиваться по другому, хотя бы иметь фиксированную или относительную высоту.
например, если для блока у которого "родительский блок" - весь экран, то margin: 0 0 5vh 0; будет как раз 5% от высоты родительского блока

[Ingernirated]

JRK_DV, спасибо!