與標準 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 佈局而不是區塊佈局。浮動不會侵入彈性容器，且容器的邊距與其子元素的邊距保持分離。

以上是與標準 CSS 佈局相比，Flexbox 的邊距表現有何不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！