Warum ignorieren meine Flex-Artikel Ränder, wenn sie „box-sizing: border-box“ verwenden?

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:

• Inhaltsfeld: Die Größe des tatsächlichen Inhalts des Elements.
• Auffüllung: Transparenter Raum innerhalb des Rahmens.
• Rand: Sichtbare Linie um das Element.
• Rand: Transparenter Raum außerhalb des Randes.

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:

• content-box (Standard): Polsterung und Ränder werden zum Inhaltsfeld hinzugefügt.
• border-box: Polsterung und Ränder werden in die Elemente einbezogen Größe.

Flexbox-Eigenschaften

In Flexbox beziehen sich die folgenden Eigenschaften auf das Layout von Flex-Elementen:

• flex- wachsen: Gibt an, wie viel zusätzlichen Platz ein Element einnehmen soll, wenn freier Speicherplatz vorhanden ist.
• flex-shrink: Gibt an, wie viel ein Element schrumpfen soll, damit es in den Container passt.
• Flex-Basis: Definiert eine ideale Größe eines Elements vor der Anwendung von Flex-Grow oder Flex-Shrink.

Lösung

Um sicherzustellen, dass Flex-Elemente dabei die Ränder respektieren box-sizing: border-box wird verwendet, beachten Sie Folgendes:

• Geben Sie flex-shrink: 0 für Flex-Elemente an, um zu verhindern, dass sie schrumpfen.
• Passen Sie den Flex-Basis-Wert an um sowohl die Inhaltsgröße als auch die Ränder zu berücksichtigen.

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!