Warum ignorieren Flex-Elemente Ränder und Boxgrößen: ein Border-Box-Problem?

Flex-Elemente respektieren Ränder und Box-Größe nicht: border-box

In CSS bestimmt die Box-Sizing-Eigenschaft, wie die Breite und Höhe eines Elements berechnet werden, einschließlich jegliche Polsterung oder Ränder. Bei der Einstellung „border-box“ umfassen die Abmessungen des Elements sowohl Polsterung als auch Ränder. Allerdings werden Ränder immer separat berechnet, unabhängig von der Boxgrößeneigenschaft.

Bei Verwendung von Flexbox führt die Einstellung von Flex auf 1 1 33,33 % mit Marge: 10px zu unerwartetem Verhalten. Obwohl Flexbox den verfügbaren Platz normalerweise gleichmäßig auf die Elemente verteilt, werden die Ränder in diesem Szenario nicht berücksichtigt. Dadurch werden die erwarteten drei Elemente pro Zeile nicht erreicht.

Um dieses Problem zu beheben, kann die Flex-Basis-Eigenschaft angepasst werden. Im bereitgestellten Beispiel ist „flex-basis“ auf 26 % eingestellt, was der gewünschten Breite jedes Elements abzüglich des Randes entspricht. Indem sichergestellt wird, dass der Spielraum nicht in die Flex-Basis einfließt, richtet Flexbox die Artikel korrekt aus und verpackt sie wie vorgesehen.

<code class="css">.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>

Das obige ist der detaillierte Inhalt vonWarum ignorieren Flex-Elemente Ränder und Boxgrößen: ein Border-Box-Problem?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!