与标准 CSS 布局相比，Flexbox 中的边距表现有何不同？

Flexbox 中的边距折叠

在 CSS 中，相邻元素上的边距通常会折叠以创建单个边距。然而，在 Flexbox 容器中，这种行为有所不同。

问题：非 Flexbox 与 Flexbox 边距

使用非 Flexbox 布局时，父元素上的边距及其最后一个子崩溃：

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

但是，在弹性盒中容器：

#container {
  display: flex;
  flex-direction: column;
}

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

边距不再折叠，导致最后一篇文章和页脚之间的间隙更大。

理解差异

边距折叠发生在块格式化上下文中。然而，Flexbox 容器创建了一种不同类型的上下文，称为 Flex 格式化上下文。

根据 CSS 盒子模型规范：

“Flex 容器为其内容建立一个新的 Flex 格式化上下文。这与建立块格式化上下文相同，只是使用 Flex 布局而不是块布局。”

在 Flex 格式化上下文中，边距不会折叠，因为内容已被处理与正常的块布局不同。浮动不会侵入弹性容器，并且容器的边距与其子元素的边距保持分离。

以上是与标准 CSS 布局相比，Flexbox 中的边距表现有何不同？的详细内容。更多信息请关注PHP中文网其他相关文章！