為什麼我的 Flex 專案在使用「box-sizing: border-box」時忽略邊距？

Flex 項目在調整盒子大小時忽略邊距：border-box

Flexbox 在調整邊距和盒子大小時可能會很長棘手。預設情況下，邊距不包含在 Flex 項目大小的計算中，即使使用 box-sizing: border-box 也是如此。

理解盒子模型

The盒模型是一個 CSS 概念，定義元素的尺寸和佈局。它由四個部分組成：

• 內容框：元素實際內容的大小。
• 填滿：邊框內的透明空間。
• 邊框：元素周圍的可見線。
• Margin：邊框外的透明空間。

box-sizing

box-sizing 屬性決定如何將內邊距和邊框計算為元素的整體大小。它有兩個可能的值：

• content-box（預設）：填充和邊框添加到內容框中。
• border-box：填充和邊框包含在元素的內容框中

Flexbox 屬性

在Flexbox 中，以下屬性與Flex 專案的版面相關：

• flex-成長：指定有可用空間時專案應佔用的額外空間量。
• flex-shrink：指定項目應收縮以適合容器的量。
• flex-basis：在應用 flex-grow 或 flex-shrink 之前定義項目的理想大小。

解決方案

確保Flex 專案尊重邊距，同時box-sizing: 使用border-box，請考慮以下事項：

• 在Flex 專案上指定flex-shrink: 0 以防止它們縮小。
• 調整 flex-basis 值考慮到內容大小和邊距。

例如，在您的程式碼中：

header>span {
  flex: 1 0 26%; /* Adjusted from 1 1 33.33% */
  margin: 10px;
}

透過調整 flex-basis，我們確保有足夠的空間內容和邊距。

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