我怎样才能使 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 and not in flex formatting context.
中的保证金折叠工程 is @Michael_B 的回答解释了这背后的原因。

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

Answer 2

它并没有将 flexbox 内部的大小加倍。在 flexbox 中，边距被认为是上 div 以及下 div

i.e. total margin = upper div margin + lower div margin

但在 flexbox 之外，边距被认为是

max (upper div margin, lower div margin ).

这种现象称为保证金崩溃。

Margin Collapse

元素的顶部和底部边距有时会折叠成一个边距，该边距等于两个边距中最大的一个。这不会发生在左右边缘！只有顶部和底部边距！

Answer 3

感谢您的回答！我学到了很多！

我想到的简单解决方案是使用：边距：0px 5px 5px 5px;

我不知道为什么我没有早点想到这个。

你可以看到它现在可以工作了here

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

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

How can I make margin behave the same in a flex container and out of it?

html

css

margin