Warum funktioniert Flex Wrap nicht mit der Boxgröße: Randbox und Ränder?

Flexbox-Elementränder und Boxgröße verstehen

Hintergrund:

Flexbox ist ein leistungsstarkes Layoutmodul, das die Kontrolle über die Dimensionierung und Verteilung von Elementen. Die box-sizing-Eigenschaft hingegen bestimmt, wie sich Auffüllung und Ränder auf die Abmessungen des Elements auswirken.

In Ihrem Szenario haben Sie erwartet, dass flexible Elemente verkleinert werden, um in drei Spalten zu passen, selbst mit box-sizing: border- Kasten. Sie sind jedoch auf ein Problem gestoßen, bei dem die Flexverpackung nicht wie erwartet funktionierte.

Erklärung:

Es ist wichtig zu beachten, dass box-sizing: border-box enthält Polsterung und Ränder werden bei der Breiten-/Höhenberechnung berücksichtigt, jedoch keine Ränder. Margen werden immer separat berechnet.

Standardeinstellungen für Flex-Container:

Eine Anfangseinstellung für Flex-Container ist „Flex-Shrink“: 1. Dies bedeutet, dass Flex-Elemente verkleinert werden können passt in den Container und überschreibt möglicherweise bestimmte Breiten, Höhen oder Flex-Basiswerte.

Lösung:

Um Ihr gewünschtes Layout zu erreichen, können Sie die Flex-Basiswerte anpassen. Basis-Eigenschaft auf einen Wert, der die Ränder berücksichtigt und gleichzeitig einen Umbruch erzwingt. Dadurch kann Flex-Grow den verbleibenden Platz gleichmäßig verteilen und nicht in den Randbereich eindringen.

Angepasstes CSS:

<code class="css">* {
  box-sizing: border-box;
}

.horizontal-layout {
  display: flex;
  width: 400px;
}

header > span { 
  flex: 1 0 26%;                    /* ADJUSTED */
  margin: 10px;
}

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 0 26%;                   /* ADJUSTED */
}</code>

Fazit:

Wenn Sie das Zusammenspiel zwischen den Rändern von Flexbox-Elementen und der Boxgröße verstehen, können Sie die Elementgröße und -platzierung in Ihren Layouts effektiv steuern.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Flex Wrap nicht mit der Boxgröße: Randbox und Ränder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!