html - 我怎样才能使 margin 在 flex 容器中和在 flex 容器中表现相同？

Question

我遇到了一个问题。当在 flexbox 中使用 margin 时，它的大小是它应该的大小的两倍(就像它不会碰撞一样)

这是我遇到的问题: jsfiddle这是代码:

<div style="height: 350px;">
<div style="height: 182px; display: flex; justify-content: flex-end; flex-direction: column;">
<div style="margin: 5px; height: 94.5px; width: 80px; background-color: red;"></div>
<div style="margin: 5px; height: 94.5px; width: 80px; background-color: red;"></div>
<div style="margin: 5px; height: 87.5px; width: 80px; background-color: brown;"></div>
</div>
<div style="margin: 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
<div style="margin: 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
</div>

这是什么原因？我怎样才能使 flex 容器内外的边距表现相同？

Answer 1

为什么会这样？
边缘坍塌工程 block formatting context而不是 flex formatting context .
Here是@Michael_B的回答解释了这背后的原因。

如何获得可折叠边距？
一种方法是用一个 div 包裹 3 个 div block 。可能有更好的方法，但您可以尝试在这里分享。