Flex 項目忽略邊距和邊框大小

在Flexbox 中，透過設定flex: 1 1 33.33% 和margin: 10px on flex物品，人們可能會期望每排三個盒子。然而，使用 flex-wrap:wrap 時，盒子不會縮小到每行三個。

原因在於 box-sizing: border-box 的本質。雖然此屬性在寬度和高度計算中包括填充和邊框，但不包括邊距。邊距是單獨計算的，預設情況下，Flex 專案具有 flex-shrink: 1，允許它們縮小以適合容器。

要解決此問題，可以透過設定 flex- 來覆寫預設行為收縮：0。這可以防止彈性項目收縮到邊緣。

另一個解決方案是調整flex-basis值，同時保持flex-grow：1。因為不需要強制執行flex-basis由於 flex-grow 會消耗可用空間，因此可以減少該值以容納邊距。例如，透過設定 flex: 1 1 26% 和 margin: 10px，flex 專案現在可以如預期調整。