Pourquoi les marges Flexbox se comportent-elles différemment que dans un contexte de formatage de bloc standard ?

Réduction des marges dans Flexbox

Généralement, en CSS, lorsqu'un parent et son dernier enfant ont une marge, les marges s'effondrent en une seule marge. Cependant, dans Flexbox, les marges se comportent différemment.

Pourquoi l'effondrement des marges est différent dans Flexbox

L'effondrement des marges est une fonctionnalité d'un contexte de formatage de bloc, qui n'est pas utilisé dans un contexte de formatage flexible. Flexbox établit un nouveau contexte de formatage flexible pour son contenu, ce qui signifie que les marges ne s'effondrent pas de la même manière que dans un contexte de formatage de bloc.

Comment faire en sorte que les marges de Flexbox se comportent comme celles qui ne sont pas Flexbox

Étant donné que la réduction des marges est une fonctionnalité d'un contexte de formatage de bloc, il n'est pas possible de faire en sorte que les marges flexbox se comportent exactement comme ceux non-flexbox. Cependant, il est possible d'obtenir un effet similaire en définissant la propriété display du conteneur flexbox sur inline-flex au lieu de flex. Cela créera un contexte de formatage flexbox, mais il sera traité comme un élément en ligne, et donc les marges s'effondreront comme prévu.

Par exemple :

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

article {
  margin-bottom: 20px;
}

main {
  background: pink;
  margin-bottom: 20px;
}

footer {
  background: skyblue;
}

Dans ce cas, le les marges s'effondreront entre le dernier article et le pied de page, ce qui donnera une marge de 20 px, tout comme dans une mise en page non-flexbox.

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!