Comment les marges se comportent-elles différemment dans Flexbox par rapport à la mise en page CSS standard ?

Réduction des marges dans Flexbox

En CSS, les marges des é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 : marges non-Flexbox et Flexbox

Lors de l'utilisation d'une disposition non-flexbox, les marges sur un élément parent et son dernier enfant s'effondre :

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

Cependant, dans une flexbox conteneur :

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

Les marges ne s'effondrent plus, ce qui entraîne un écart plus grand entre le dernier article et le pied de page.

Comprendre la différence

La réduction des marges se produit dans les contextes de formatage de bloc. Cependant, les conteneurs flexbox créent un type de contexte différent appelé contexte de formatage flexible.

Selon la spécification CSS Box Model :

"Un conteneur flexible établit un nouveau contexte de formatage flexible pour son contenu. Cela revient à établir un contexte de formatage de bloc, sauf que la disposition flexible est utilisée à la place de la disposition en bloc."

Dans un contexte de formatage flexible, les marges ne s'effondrent pas. car le contenu est traité différemment par rapport à une disposition de bloc normale. Les flotteurs n'empiètent pas sur le conteneur flexible et les marges du conteneur restent séparées des marges de ses éléments enfants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!