Flex-Elemente ignorieren Ränder mit Box-Größe: border-box
Flexbox kann schwierig sein, wenn es um Ränder und Box-Größe geht. Standardmäßig werden Ränder nicht in die Berechnung der Größe des Flex-Elements einbezogen, selbst wenn box-sizing: border-box verwendet wird.
Das Boxmodell verstehen
Die Das Box-Modell ist ein CSS-Konzept, das die Abmessungen und das Layout von Elementen definiert. Es besteht aus vier Abschnitten:
Box-Größe
Die Eigenschaft der Box-Größe bestimmt wie Auffüllung und Ränder in die Gesamtgröße eines Elements eingerechnet werden. Es gibt zwei mögliche Werte:
Flexbox-Eigenschaften
In Flexbox beziehen sich die folgenden Eigenschaften auf das Layout von Flex-Elementen:
Lösung
Um sicherzustellen, dass Flex-Elemente dabei die Ränder respektieren box-sizing: border-box wird verwendet, beachten Sie Folgendes:
Zum Beispiel in Ihrem Code:
header>span { flex: 1 0 26%; /* Adjusted from 1 1 33.33% */ margin: 10px; }
Durch die Anpassung der Flex-Basis stellen wir sicher, dass genügend Platz für beides vorhanden ist der Inhalt und die Ränder.
Das obige ist der detaillierte Inhalt vonWarum ignorieren meine Flex-Artikel Ränder, wenn sie „box-sizing: border-box' verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!