Heim  >  Artikel  >  Web-Frontend  >  Warum funktioniert Flex Wrap nicht mit der Boxgröße: Randbox und Ränder?

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

Susan Sarandon
Susan SarandonOriginal
2024-10-31 12:58:02569Durchsuche

Why Doesn't Flex Wrap Work with Box-Sizing: Border-Box and Margins?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn