Pourquoi un élément flexible positionné de manière absolue affecte-t-il la mise en page dans IE11 ?

Élément flexible absolument positionné inclus dans le flux normal dans IE11

Dans une disposition flexbox, les éléments sont disposés en ligne ou en colonne en fonction de leur propriétés de flexion. Cependant, lorsqu'un élément de la flexbox est positionné de manière absolue, il devient un élément hors flux et ne doit pas participer à la mise en page.

Dans l'exemple de code fourni :

<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
  <div class="bg">Background</div>
</div>

Le div ".bg" est positionné de manière absolue. Malgré cela, dans IE11, l'espace entre les éléments flexibles est distribué comme si le div ".bg" faisait partie du flux normal. Il s'agit d'un écart par rapport à la spécification flexbox.

Solution de contournement :

Pour résoudre ce problème, une solution de contournement consiste à déplacer le div ".bg" en position absolue entre l'autre. deux éléments flex :

<div class="container">
  <div class="c1">Content 1</div>
  <div class="bg">Background</div>
  <div class="c2">Content 2</div>
</div>

Avec ce changement structurel, le div ".bg" n'affecte plus la répartition de l'espace entre les éléments flex, et la disposition souhaitée est obtenue.

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!