Flexbox élimine-t-il l'effondrement des marges ?

Réduction des marges dans Flexbox

En CSS, lorsqu'un parent et son dernier enfant ont tous deux des marges, ces marges se réduisent en une seule marge. Cependant, ce comportement change lors de l'utilisation de flexbox.

Dans flexbox, les marges ne s'effondrent pas. Cela signifie que la marge de l'élément parent d'un élément flex (par exemple, un conteneur flex) ne se combinera pas avec la marge de l'élément flex lui-même. Cela peut entraîner un espacement involontaire entre les éléments dans une disposition flexbox.

Par exemple, considérons le CSS suivant :

article {
  margin-bottom: 20px;
}

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

footer {
  background: skyblue;
}

Dans cet exemple, nous avons un élément article imbriqué dans un élément principal. , qui est à son tour imbriqué dans un élément de pied de page. Sans flexbox, la marge de l'article et la marge du principal s'effondreraient en une seule marge de 20 px entre l'article et le pied de page. Cependant, avec flexbox, nous obtenons une marge de 40 px entre l'article et le pied de page : une marge complète de 20 px de l'article au principal et 20 pixels supplémentaires du principal au pied de page.

Pour éviter ce comportement, nous pouvons supprimer le Disposition flexbox à partir de l'élément conteneur. Par exemple :

#container {
  display: block;
}

En définissant la propriété display de l'élément conteneur sur block, nous supprimons le contexte de formatage de la flexbox et restaurons le comportement de réduction de la marge par défaut.

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!