為什麼 Flex 項目不透過邊距和「邊框」大小縮小以適應每行三個？

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

在Flexbox 中，透過設定flex: 1 1 33.33% 和marginon: 10px物品，人們可能會期望每排三個盒子。然而，使用 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 專案現在可以按預期調整。

以上是為什麼 Flex 項目不透過邊距和「邊框」大小縮小以適應每行三個？的詳細內容。更多資訊請關注PHP中文網其他相關文章！