Flex-Elemente ohne Berücksichtigung von Rändern und Randbox-Größen

In Flexbox durch Festlegen von Flex: 1 1 33,33 % und Marge: 10 Pixel auf Flex Artikel, man könnte drei Kisten pro Reihe erwarten. Mit „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 Auffüllungen und Ränder in die Breiten- und Höhenberechnungen einbezieht, schließt sie Ränder aus. Ränder werden separat berechnet und standardmäßig verfügen Flex-Elemente über 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- festlegt. Shrink: 0. Dadurch wird 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 die Ränder unterzubringen. Durch die Einstellung von Flex: 1 1 26 % und Marge: 10 Pixel passen die Flex-Elemente jetzt wie erwartet.