Warum berücksichtigen meine Flex-Elemente die Ränder nicht, wenn ich „box-sizing: border-box' verwende?

Flexible Elemente respektieren Ränder und Boxgröße nicht: border-box

Es ist von entscheidender Bedeutung, das Konzept der Boxgröße zu verstehen und zu verstehen, wie es sich auf das Verhalten von flexiblen Elementen auswirkt mit CSS Flexbox. Standardmäßig ist die Box-Sizing-Eigenschaft auf „content-box“ eingestellt, was bedeutet, dass Auffüllungen und Ränder zur Breite und Höhe des Inhalts hinzugefügt werden. Wenn die Boxgröße jedoch auf „border-box“ eingestellt ist, werden die Ränder bei der Breiten- oder Höhenberechnung nicht berücksichtigt.

In diesem Fall treten bei flexiblen Elementen Probleme mit den Rändern und der Boxgröße auf, die auf eingestellt sind „border-box“, die Ursache liegt in der Nichtberücksichtigung von Rändern bei der Berechnung der Elementbreiten. Die Anfangseinstellung von Flex-Containern ist Flex-Shrink: 1, was bedeutet, dass Flex-Elemente ihre Größe reduzieren können, um in den Container zu passen. Dies allein reicht jedoch nicht aus, um die Einhaltung der angegebenen Breiten, Höhen oder Flex-Basis sicherzustellen, es sei denn, Flex-Shrink ist deaktiviert.

Lösung

Um das Problem zu beheben und stellen Sie sicher, dass flexible Elemente bei der Verwendung von box-sizing: border-box die Ränder berücksichtigen. Beachten Sie die folgende Anpassung:

Ersetzen Sie:

<code class="css">flex: 1 1 33.33%;
margin: 10px;</code>

Durch:

<code class="css">flex: 1 0 26%;
margin: 10px;</code>

Durch die Reduzierung der Flex-Basis von 33,33 % auf 26 % wird sie klein genug, um einen Umbruch zu erzwingen, während der Rand dennoch berücksichtigt werden kann. Diese Anpassung stellt sicher, dass Flex-Elemente nicht in den Randraum eindringen und die angegebenen Breiten einhalten und Ränder.

Das obige ist der detaillierte Inhalt vonWarum berücksichtigen meine Flex-Elemente die Ränder nicht, wenn ich „box-sizing: border-box' verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!