在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中文網其他相關文章！
