flex容器带gap时如何设置子项宽度实现指定布局不换行

• 未统一盒模型规则：默认content-box盒模型下，容器的左右padding会向外撑宽，子项宽度计算也不包含内边距、边框，容易出现宽度溢出
• 子项宽度未扣除gap占用空间：flex容器的gap是额外叠加在子项宽度之外的，原本33%+66%的子项总宽度已经接近100%，加上12px水平gap后总宽度超过容器可用宽度，导致红色、绿色盒子被挤到换行

/* 全局统一盒模型，避免宽高计算异常 */
* {
  box-sizing: border-box;
}
.container {
  max-width: 200px;
  width: 200px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 12px 0 12px;
}

.item1 {
  /* 减去水平gap的一半，预留间隙空间 */
  width: calc(33.33% - 6px);
  height: 200px;
  background-color: red;
}

.item2 {
  /* 减去水平gap的一半，33.33%+66.66%刚好占满整行比例 */
  width: calc(66.66% - 6px);
  height: 200px;
  background-color: green;
}

.item3 {
  width: 100%;
  height: 200px;
  background-color: blue;
}

<div class="container">
  <div class="item3"></div>
  <div class="item1"></div>
  <div class="item2"></div>  
</div>

如果希望比例适配更灵活，不需要手动计算第二行的宽度占比，可以用flex属性实现：

.item1 {
  /* 固定占33%宽度减去gap的一半，不收缩不放大 */
  flex: 0 0 calc(33.33% - 6px);
  height: 200px;
  background-color: red;
}

.item2 {
  /* 自动占满剩余所有空间，不需要手动设置宽度 */
  flex: 1;
  height: 200px;
  background-color: green;
}

这个方案下绿色盒子会自动填充第二行剩余空间，适配性更强，也不会出现换行问题。

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