Pourquoi les éléments flexibles s'enroulent-ils lors de l'utilisation d'un remplissage en pourcentage ?

Pourquoi l'élément flexible est-il divisé lorsqu'un remplissage en pourcentage est appliqué ?

Envisagez un scénario dans lequel un

élément, un élément flexible, englobe plusieurs éléments
• éléments. Lorsque le remplissage en pourcentage est appliqué au champ
• éléments, le
  le conteneur est divisé sur plusieurs lignes. Cependant, ce n'est pas le cas lorsque un remplissage fixe est utilisé.

  Explication

  Lorsque le remplissage en pourcentage est utilisé, il est relatif à la largeur du bloc conteneur, dans ce cas, le < ul>. Le problème vient du fait que le pourcentage de remplissage ne peut pas être résolu avant que la largeur du conteneur ne soit déterminée.

  Sans remplissage fixe, le navigateur calcule la largeur de

  en fonction de son contenu. Un pourcentage de remplissage est ensuite appliqué, ce qui donne un conteneur plus large qui ne convient plus à tous les éléments
  • éléments sur une seule ligne.

    Beispiel

    Pour mieux illustrer ce comportement, considérons le code suivant :

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

    Si nous exécutons le JavaScript suivant dans la console, nous peut voir la largeur du

    une fois le remplissage appliqué :

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

    Cela affichera la largeur du

    après l'application du remplissage en pourcentage.

    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!