在弹性计算中包括边距？

Question

我有这个 fiddle:

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 之一可以切换 (hide/show)。

问题是第一个 div 理论上不应该改变它的大小，但实际上它确实如此。
我认为问题是 flex 没有考虑边距。

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

Answer 1

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

您可以通过将 flex-basis: 10px 添加到 .r3 来解决这个问题。这将补偿丢失的 10px。

pen