Css flexbox中的边距折叠

通常，在CSS中，当父级及其最后一个子级具有边距时，边距将折叠以创建单个边距。例如

文章{
边际下限：20px
}
主要{
背景：粉红色；
边缘底部：20px；
}
页脚{
背景：天蓝色；
}

项目1
项目2
页脚

页边距折叠是一种功能

在一个市场中没有利润崩溃

flex容器为其容器建立新的flex格式上下文 目录这与建立块格式上下文相同， 除了使用flex布局而不是块布局之外。例如 浮动不会侵入flex容器，flex 容器的边距不会与其内容的边距一起折叠

---

注意：这不是使边距在柔性框布局中的行为与在块布局中的行为相同的方法；然而，在某些情况下，这可能有助于解决保证金问题

您可以使用伪选择器来获得想要的效果，而不是依赖于折叠边距：

main{
显示器：flex；
弯曲方向：立柱；
边缘底部：20px；
}
文章{
边缘底部：20px；
背景：#eee；
}
文章：最后一个孩子{
页边距底部：0；
}
页脚{
背景：#eef；
}

这是第一条
这是第二条
这是第三条
这是页面的页脚

公认的答案解释了为什么它不起作用，但没有提供解决方案。这里有一种使flexbox元素对齐的方法，就像非flexbox示例一样

#容器{
显示器：flex；
弯曲方向：立柱；
}
主要{
背景：粉红色；
边缘底部：20px；
}
主>文章+文章{
利润上限：20px
}
页脚{
背景：天蓝色；
}

项目1
项目2
页脚

边距修剪

可能会添加到css规范中，以处理此类情况。有关更多详细信息，请参阅。可以在此处查看浏览器支持：

虽然flexbox不支持页边距折叠，但您可以使用

gap

获得相同的结果：

.parent{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
柱间距：5px；
行间距：15px；
最大宽度：70像素；
外形：1px实心#440；
}
.parent>div{
背景：#8ff；
宽度：20px；
高度：20px；
}

1.
2.
3.
4.
5.

nnnnooooooooooooooo别告诉我这个！如何消除模块之间的额外空间？@TomRoggero可能会为该内容添加一个包装器，以便在块格式上下文中工作？包装器然后存在于flex格式上下文中，但不是它的内容——我猜。然而，包装往往会破坏好的、好的语义标记。令人恼火的是，我们没有办法打开/关闭页边距折叠，因为我们看到fitTo澄清了我不清楚的一点：没有折叠页边距的是flex项（而不是flex容器本身）。下面是一个例子：您会注意到flex项目A、B、C各有50像素的余量，但它们之间的间距为100像素。这两个flex容器每个都有100px的边距，这些边距会折叠。@HenrikN，只是为了澄清一下——因为您提到了A、B和C的相对边距——边距折叠只适用于垂直边距。如果到2021年4月，Safari还没有提供Safari支持，那么这对包装好的元素不起作用（到2021年4月25日，14.1+版本）