Flexbox布局意外换行：每行应显示3个DIV却出现换行

嗨，这个问题我太熟啦！咱们来拆解一下为啥会出现这个意外换行～

你虽然设置了box-sizing:border-box，但这个属性只能把padding和border纳入元素的宽高计算，margin是完全不包含在内的！

你给每个.third元素设置了flex-basis:calc(100%/3)，再加上左右各5px的margin，那每个元素实际占据的水平空间就是：
calc(100%/3) + 5px（左margin） + 5px（右margin）

三个这样的元素加起来总宽度直接超过了容器的100%，flex布局在空间不够的时候就会触发换行，所以第二个div之后就被迫换行了。

方案1：把margin纳入flex-basis的计算 #

直接调整flex-basis的公式，把左右margin的总宽度减去：

.third {
  margin: 5px;
  padding:5px;
  background-color: #555;
  flex-basis: calc(100%/3 - 10px); /* 减去左右各5px的margin，总共10px */
}

方案2：用flex的gap属性（最推荐！） #

现代flex布局自带了gap属性，专门用来设置元素之间的间距，浏览器会自动帮你处理空间分配，不用自己算来算去：

.flex {
  display: flex;
  flex-wrap:wrap;
  gap: 10px; /* 代替每个元素的margin，直接设置元素间的间距 */
}
.third {
  padding:5px;
  background-color: #555;
  flex-basis: calc(100%/3);
  /* 这里可以去掉margin啦 */
}

这个方案简洁又不容易出错，是现在做flex布局的首选方式。

方案3：让元素自动填充剩余空间 #

如果允许元素宽度有小幅度调整，可以给.third加上flex-grow:1，让它们自动填满容器的剩余空间：

.third {
  margin: 5px;
  padding:5px;
  background-color: #555;
  flex-basis: calc(100%/3 - 10px);
  flex-grow: 1;
}

这样就算计算有小误差，元素也会自动拉伸，不会出现换行问题。

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