Effondrement de la marge dans flexbox

en css, les marges sur les éléments adjacents s'effondrent généralement pour créer une seule marge. Cependant, dans les conteneurs Flexbox, ce comportement diffère.

Le problème: non-flexbox vs margines flexibles

lors de l'utilisation de la mise en page non flexible, des marges sur un élément parent et de son dernier enfant effondrement:

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

cependant, dans un conteneur flexbox:

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

Les marges ne s'effondrent plus, résultant en un écart plus important entre le dernier article et le pied de page.

Comprendre la différence

L'effondrement de la marge se produit dans des contextes de formatage de blocs. Cependant, les conteneurs Flexbox créent un type de contexte différent appelé contexte de formatage flexible.

Selon la spécification du modèle de boîte CSS:

"Un conteneur de flex établit un nouveau contexte de formatage flexible pour son contenu. Les marges ne s'effondrent pas car le contenu est traité différemment Rispetto une disposition de bloc normale. Les flotteurs ne s'introduisaient pas dans le conteneur flexible, et les marges du conteneur restent séparées des marges de ses éléments enfants.