Warum stören prozentuale Auffüllungen das Flexbox-Layout?

Warum prozentuale Polsterungen das Verhalten von Flex-Elementen beeinträchtigen

Das Flexbox-Layout ist darauf ausgelegt, Elemente gleichmäßig entlang einer Achse zu verteilen. Wenn Sie jedoch prozentuale Auffüllungen auf Flex-Elemente (nicht flexible Elemente, die in einem Flex-Container enthalten sind) anwenden, kann das Layout des Containers gestört werden.

In diesem Beispiel haben wir einen Flex-Container (

), der enthält mehrere nicht flexible Elemente (
• ). Wenn prozentuale Auffüllungen auf die einzelnen
• Elemente wird der Container in mehrere Zeilen aufgeteilt:

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

  Nach dem Login kopieren

  Wenn jedoch feste Auffüllungen verwendet werden (z. B. Auffüllung: 0 30px), bleibt der Container in einer einzelnen Zeile.

  Erklärung:

  Das Verhalten prozentualer Auffüllungen ist auf den beteiligten Berechnungsprozess zurückzuführen. Die Polsterung wird relativ zur Breite des enthaltenden Blocks bestimmt. Diese Breite ist zunächst unbekannt und muss anhand des Inhalts oder etwaiger fester Breitenwerte berechnet werden.

  Bei prozentualen Auffüllungen erfolgt die Breitenberechnung nach dem Aufbringen der Auffüllung. Daher wird die Breite des Containers unter Berücksichtigung der Polsterung angepasst, was zu einer falschen Berechnung führt. Dies führt zu einer ungleichmäßigen Verteilung der Artikel und zu einer Störung des Layouts des Flex-Containers.

  Das obige ist der detaillierte Inhalt vonWarum stören prozentuale Auffüllungen das Flexbox-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!