Warum werden flexible Elemente umwickelt, wenn die prozentuale Polsterung verwendet wird?

Warum wird das Flex-Element geteilt, wenn prozentualer Abstand angewendet wird?

Stellen Sie sich ein Szenario vor, in dem ein

Das Element, ein flexibles Element, umfasst mehrere nicht flexible
• Elemente. Wenn eine prozentuale Auffüllung auf die
• Elemente, die
  Der Container wird über mehrere Zeilen aufgeteilt. Dies ist jedoch nicht der Fall, wenn feste Auffüllung verwendet wird.

  Erklärung

  Wenn prozentuale Auffüllung verwendet wird, ist sie relativ zur Breite des enthaltenden Blocks, in diesem Fall ist < ul>. Das Problem ergibt sich aus der Tatsache, dass die prozentuale Auffüllung nicht gelöst werden kann, bevor die Breite des Containers bestimmt wurde.

  Ohne feste Auffüllung berechnet der Browser die Breite des

  basierend auf seinem Inhalt. Dann wird eine prozentuale Polsterung angebracht, was zu einem breiteren Behälter führt, der nicht mehr für alle
  • Elemente in einer einzelnen Zeile.

    Beispiel

    Um dieses Verhalten besser zu veranschaulichen, betrachten Sie den folgenden Code:

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

    Wenn wir das folgende JavaScript in der Konsole ausführen, werden wir kann die Breite des

    sehen. Nachdem die Polsterung angewendet wurde:

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

    Dies gibt die Breite des

    nachdem die prozentuale Polsterung angewendet wurde.

    Das obige ist der detaillierte Inhalt vonWarum werden flexible Elemente umwickelt, wenn die prozentuale Polsterung verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!