為什麼 Flex 項目忽略邊距和框大小：邊框問題？

Flex 項目不考慮邊距和Box-Sizing：border-box

在CSS 中，box-sizing 屬性決定如何計算元素的寬度和高度，包括任何填充或邊框。設定為 border-box 時，元素的尺寸包括內邊距和邊框。然而，無論 box-sizing 屬性如何，邊距總是單獨計算。

使用 Flexbox 時，將 flex 設定為 1 1 33.33% 且 margin: 10px 會產生意外行為。儘管 Flexbox 通常會在項目之間平均分配可用空間，但在這種情況下不會考慮邊距。結果，沒有達到預期的每行三個項目。

要解決此問題，可以調整 flex-basis 屬性。在提供的範例中，flex-basis 設定為 26%，這是每個項目的所需寬度減去邊距。透過確保邊距不考慮到 flex-basis 中，Flexbox 可以正確對齊項目並按預期包裝它們。

<code class="css">.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>

以上是為什麼 Flex 項目忽略邊距和框大小：邊框問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！