Flexbox为何从3列转为2列？背后逻辑解析

示例代码 #

CSS代码

.box {
  display: flex;
  flex-wrap: wrap;
}
.box > * {
  flex: 1 0 33%;
  border: 1px solid red;
}

HTML代码

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

问题原因解析 #

你设置的flex: 1 0 33%是三个属性的简写：

• flex-grow: 1：容器有剩余空间时，元素会自动放大填充
• flex-shrink: 0：元素完全不会被压缩缩小
• flex-basis: 33%：元素的基准宽度为容器宽度的33%

核心问题是边框宽度未被纳入基准宽度计算：每个子元素的实际占用宽度是33% + 2px（左右各1px的边框）。当容器宽度缩小到某个临界点时，三个子元素的总宽度（3*(33% + 2px)）会超过容器的100%宽度。而因为flex-shrink: 0限制了元素不能被压缩，第三个元素就会被迫换行，布局从3列变成2列。

解决方法 #

• 给子元素添加box-sizing: border-box，让边框宽度包含在33%的基准宽度内：

  .box > * {
    flex: 1 0 33%;
    border: 1px solid red;
    box-sizing: border-box;
  }
  

• 调整flex-basis的数值，比如设为31%，提前留出边框的占用空间
• 将flex-shrink设为1，允许元素在空间不足时被适当缩小：flex: 1 1 33%

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