為什麼我的 Flex 專案在使用 `box-sizing: border-box` 時不考慮邊距？

Flex 項目不考慮邊距和盒子大小：border-box

了解盒子大小的概念以及它如何影響Flex 項目的行為至關重要：使用CSS Flexbox。預設情況下，box-sizing 屬性設定為“content-box”，這表示將填滿和邊框新增至內容寬度和高度。但是，當 box-sizing 設定為「border-box」時，邊距不會計入寬度或高度計算。

在這種情況下，Flex 項目會遇到邊距和 box-sizing 設定為“的問題” “border-box”，原因在於計算項目寬度時忽略邊距。 Flex 容器的初始設定是 flex-shrink: 1，這表示 Flex 專案可以減少其大小以適合容器。但是，除非禁用了 flex-shrink，否則這本身不足以確保遵守指定的寬度、高度或 flex-basis。

解決方案

解決問題並確保彈性項目在使用box-sizing: border-box 時尊重邊距，請考慮以下調整：

替換：

<code class="css">flex: 1 1 33.33%;
margin: 10px;</code>

替換為：

<code class="css">flex: 1 0 26%;
margin: 10px;</code>

透過將flex-basis 從33.33% 減少到26%，它變得足夠小，足以強制換行，同時仍允許考慮邊距。此調整可確保 Flex 項目不會侵入邊距空間並遵守指定的寬度和邊距。

以上是為什麼我的 Flex 專案在使用 `box-sizing: border-box` 時不考慮邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！