Warum unterbrechen prozentuale Auffüllungen bei untergeordneten Flex-Elementen den übergeordneten Flex-Container?

Warum prozentuale Polsterung flexible Artikel kaputt macht

Stellen Sie sich ein Szenario vor, in dem ein

Das Element ist als Flex-Element gestaltet. Innerhalb dieses
sind mehrere
• Elemente, die keine Flex-Elemente sind. Wenn prozentuale Auffüllungen auf die
• Elemente, die
  Element bricht in mehrere Zeilen auf. Wenn jedoch feste Auffüllungen (z. B. 30 Pixel) verwendet werden, ist das
  bleibt in einer einzelnen Zeile.

  Um dieses Verhalten zu verstehen, vertiefen wir uns in die Berechnung, die mit prozentualen Auffüllungen verbunden ist. Prozentuale Füllwerte beziehen sich auf die Breite des enthaltenden Blocks. Die Breite des enthaltenden Blocks wird jedoch durch seinen Inhalt bestimmt.

  In diesem Fall ist die Breite des

  wird basierend auf dem Inhalt seines
  • berechnet. Elemente. Um diese Breite zu erhalten, verwenden wir den folgenden Code:

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

    Nach dem Login kopieren

    Die Komplexität liegt darin, dass wir die prozentualen Füllwerte nicht bestimmen können, bevor wir die Breite berechnen. Daher berechnen wir zunächst die Breite basierend auf dem Inhalt.

    Wenn daher prozentuale Auffüllungen verwendet werden, hat der Browser Schwierigkeiten, die Breite des enthaltenden Blocks zu bestimmen, was zu einem mehrzeiligen Verhalten führt. Im Gegensatz dazu wird bei festen Polsterungen die Breite explizit definiert, wodurch dieses Problem beseitigt wird.

    Das obige ist der detaillierte Inhalt vonWarum unterbrechen prozentuale Auffüllungen bei untergeordneten Flex-Elementen den übergeordneten Flex-Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!