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块。可能有更好的方法，但是您可以在此处尝试分享。

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>

如何在Flex容器内外使边缘的行为相同？

3 个答案: