Pourquoi les remplissages en pourcentage sur les enfants des éléments flexibles brisent-ils le conteneur flexible parent ?

Pourquoi le remplissage en pourcentage interrompt les éléments flexibles

Envisagez un scénario dans lequel un

L'élément est conçu comme un élément flexible. À l'intérieur de ce
sont plusieurs
• des éléments qui ne sont pas des éléments flexibles. Lorsque des remplissages en pourcentage sont appliqués au champ
• éléments, le
  L'élément est divisé en plusieurs lignes. Cependant, lorsque des remplissages fixes (par exemple 30 px) sont utilisés, le champ
  reste sur une seule ligne.

  Pour comprendre ce comportement, nous approfondissons le calcul impliqué dans les remplissages en pourcentage. Les valeurs de remplissage en pourcentage sont relatives à la largeur du bloc conteneur. Cependant, la largeur du bloc contenant est déterminée par son contenu.

  Dans ce cas, la largeur du bloc

  est calculé en fonction du contenu de son
  • éléments. Pour obtenir cette largeur, nous utilisons le code suivant :

    console.log(document.querySelector('ul').offsetWidth);

    Copier après la connexion

    La complexité réside dans le fait qu'on ne peut pas déterminer les valeurs de pourcentage de remplissage avant de calculer la largeur. Par conséquent, nous calculons d'abord la largeur en fonction du contenu.

    Par conséquent, lorsque des remplissages en pourcentage sont utilisés, le navigateur a du mal à déterminer la largeur du bloc conteneur, ce qui entraîne un comportement multiligne. En revanche, avec des rembourrages fixes, la largeur est explicitement définie, éliminant ce problème.

    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!