marging in flexbox

in css, Ränder auf benachbarten Elementen kollabieren typischerweise, um einen einzelnen Rand zu erstellen. In Flexbox-Containern unterscheidet sich dieses Verhalten jedoch.

Das Problem: Nicht-FlexBox vs. Flexbox Margen

Wenn Sie Non-FlexBox-Layout verwenden, kollabieren Sie ein übergeordnetes Element und sein letztes untergeordnetes Collapse:

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

In einem Flexbox -Container:

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

Die Margen kollabieren nicht mehr und führen zu einer größeren Lücke zwischen dem letzten Artikel und der Fußzapfen. Flexbox -Container erstellen jedoch einen anderen Kontext, der als Flex -Formatierungs -Kontext bezeichnet wird.

gemäß der CSS -Box -Modellspezifikation: ein Flex -Container legt einen neuen Flex -Format -Kontext fest. Kontext, Ränder kollabieren nicht, da der Inhalt als normales Blocklayout unterschiedlich behandelt wird. Floats dringen nicht in den Flexbehälter ein, und die Ränder des Behälters bleiben von den Rändern seiner Kinderelemente getrennt.