Warum werden Flex-Elemente nicht so verkleinert, dass sie mit Rändern und „Randrahmen'-Größe auf drei pro Zeile passen?

Flex-Elemente ohne Berücksichtigung von Rändern und Border-Box-Größe

In Flexbox, durch Einstellen von Flex: 1 1 33,33 % und Marge: 10 Pixel auf Flex Artikel, man könnte drei Kisten pro Reihe erwarten. Bei Flex-Wrap:Wrap schrumpfen die Kartons jedoch nicht so, dass sie auf drei pro Reihe passen.

Der Grund liegt in der Art der Kartongröße: Border-Box. Während diese Eigenschaft bei der Breiten- und Höhenberechnung Auffüllungen und Ränder berücksichtigt, schließt sie Ränder aus. Ränder werden separat berechnet und standardmäßig haben Flex-Elemente den Wert „Flex-Shrink: 1“, wodurch sie verkleinert werden können, damit sie in den Container passen.

Um dieses Problem zu beheben, kann man das Standardverhalten überschreiben, indem man „Flex-Shrink“ einstellt. Shrink: 0. Dies verhindert, dass die Flex-Elemente in die Ränder schrumpfen.

Eine andere Lösung besteht darin, den Flex-Basis-Wert anzupassen und gleichzeitig Flex-Grow beizubehalten: 1. Da keine Notwendigkeit besteht, Flex-Basis durchzusetzen Aufgrund des Verbrauchs von freiem Speicherplatz durch Flex-Wachstum kann man den Wert reduzieren, um den Rändern Rechnung zu tragen. Durch die Einstellung von Flex: 1 1 26 % und Margin: 10 Pixel passen die Flex-Elemente jetzt wie erwartet.

Das obige ist der detaillierte Inhalt vonWarum werden Flex-Elemente nicht so verkleinert, dass sie mit Rändern und „Randrahmen'-Größe auf drei pro Zeile passen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!