Pourquoi les remplissages en pourcentage perturbent-ils la disposition Flexbox ?

Pourquoi les rembourrages en pourcentage interrompent le comportement des éléments flexibles

La disposition Flexbox est conçue pour répartir les éléments uniformément le long d'un axe. Cependant, lors de l'application de pourcentages de remplissage à des éléments flexibles (éléments non flexibles contenus dans un conteneur flexible), la disposition du conteneur peut être perturbée.

Dans cet exemple, nous avons un conteneur flexible (

) contenant plusieurs éléments non flexibles (
• ). Lorsque des pourcentages de remplissage sont appliqués à l'individu
• éléments, le conteneur est divisé en plusieurs lignes :

  li {
    display: inline-block;
    padding: 0 5%;
    border: 1px solid black;
  }
  
  header {
    display: flex;
  }
  
  ul {
    border:1px solid red;
  }

  Cependant, lorsque des remplissages fixes sont utilisés (par exemple, padding : 0 30px), le conteneur reste sur une seule ligne.

  Explication :

  Le comportement des remplissages en pourcentage est dû au processus de calcul impliqué. Le remplissage est déterminé par rapport à la largeur du bloc conteneur. Cette largeur est initialement inconnue et doit être calculée en fonction du contenu ou de toute valeur de largeur fixe.

  Dans le cas de remplissages en pourcentage, le calcul de la largeur a lieu après l'application du remplissage. La largeur du conteneur est donc ajustée en tenant compte du rembourrage, ce qui conduit à un calcul erroné. Cela entraîne une répartition inégale des articles et une rupture de la disposition du conteneur flexible.

  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!