Heim > Web-Frontend > CSS-Tutorial > Warum ignorieren meine Flex-Artikel Ränder, wenn sie „box-sizing: border-box' verwenden?

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

Susan Sarandon
Freigeben: 2024-11-02 06:07:02
Original
212 Leute haben es durchsucht

Why Are My Flex Items Ignoring Margins When Using `box-sizing: border-box`?

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage