在flex计算中包含边距？

Question

我有这个小提琴：

http://codepen.io/FezVrasta/pen/rOvpqL

<div class="r1"></div>
<div class="r2"><button>toggle</button></div>
<div class="r1 target"></div>

我在flexbox中有3个div，每个div都有一个底边 其中一个div可以切换（隐藏/显示）。

问题是第一个div不应该在理论上改变它的大小，但实际上它确实如此 我认为问题在于不考虑利润率。

是否有使用flex的解决方案？

Answer 1

在这种情况下，当您移除底部元素（对应于元素的边距底部）时，flexbox-layout缺少10px。

您可以克服此问题，将flex-basis: 10px添加到.r3。这将补偿失踪的10px。

pen