為什麼 Flex Wrap 不能與 Box-Sizing：Border-Box 和 Margins 一起使用？

了解Flexbox 項目邊距和盒子大小

背景：

Flexbox 是一個強大的佈局模組，提供對元素的大小和分佈。另一方面，box-sizing 屬性決定了填滿和邊框如何影響元素的尺寸。

在您的場景中，您期望 Flex 項目縮小以適合三列，即使使用 box-sizing： border-盒子。但是，您遇到了彈性包裝無法如預期般運作的問題。

說明：

重要的是要注意box-sizing: border-box 包括寬度/高度計算中包含內邊距和邊框，但不包含邊距。邊距始終單獨計算。

預設 Flex 容器設定：

Flex 容器的初始設定是 flex-shrink：1。這意味著 Flex 項目可以收縮到適合容器，可能會覆蓋指定的寬度、高度或 flex-basis 值。

解決方案：

要實現所需的佈局，您可以調整flex- basic 屬性設定為一個值，該值既能容納邊距，又能強制換行。這將允許 flex-grow 均勻分配剩餘空間，而不會侵入邊距空間。

調整後的CSS：

<code class="css">* {
  box-sizing: border-box;
}

.horizontal-layout {
  display: flex;
  width: 400px;
}

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

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 0 26%;                   /* ADJUSTED */
}</code>

結論：

透過了解Flexbox 項目邊距和框架大小之框大小之框大小之框大小之框大小之框大小之框大小之框大小之框大小之框大小之類間的相互作用，您可以有效控制佈局中的元素大小和位置。

以上是為什麼 Flex Wrap 不能與 Box-Sizing：Border-Box 和 Margins 一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！