设置box-sizing:border-box后Flex子项仍意外换行的问题咨询

先看你提供的代码：

CSS代码 #

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(244, 244, 244);
}

.container {
    background-color: antiquewhite;
    height: 100vh;
}

.flex-container {
    margin: auto;
    display: flex;
    border: 1px solid black;
    background-color: aqua;
    width: 600px;
    flex-flow: row wrap;
}

.flex-item {
    border: 1px solid black;
    width: 100px;
}

HTML代码 #

<div class="container">
   <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
    <div class="flex-item">Item 4</div>
    <div class="flex-item">Item 5</div>
    <div class="flex-item">Item 6</div>
  </div>
</div>

问题原因 #

你误解了box-sizing: border-box的作用范围——它只负责让单个元素自身的width包含自己的边框和内边距，不会改变flex容器内部的空间分配逻辑：

• 你的flex容器设置了width: 600px，同时加了border: 1px solid black。因为border-box规则，容器的总宽度确实是600px，但容器内部的可用内容区域宽度是600px - 1px(左边框) - 1px(右边框) = 598px。
• 6个子项每个宽度100px，总宽度是600px，超过了容器内部的可用宽度598px。再加上你设置了flex-flow: row wrap，最后一个子项就会被挤到下一行。
• 移除容器边框后，可用内容宽度变回完整的600px，刚好能放下6个子项，所以不会换行。

解决办法 #

推荐三种修复方式：

• 调整容器宽度，把边框宽度算进去：width: calc(600px + 2px)
• 让子项自动适配容器宽度，将子项的width:100px改为flex: 0 0 calc(100%/6)，这样不管容器有没有边框，子项都会平均分配空间
• 如果不需要边框，直接移除flex-container的border属性

内容的提问来源于stack exchange，提问作者Robert