如何用Flexbox实现5个盒子3x2布局并修复第二行错位问题

问题出在Flex子项默认属性和对齐规则的计算逻辑上：

1. 你使用了justify-content: space-between，该属性会把每行的剩余可用空间全部分配到同行子项的中间间隙。第一行的3个input是替换元素，默认有最小宽度限制，不会被Flex自动收缩，当容器宽度大于「3*200px + 2个列间距」的阈值时，第一行的列间隙会被自动拉宽。
2. 第二行的占位.spacer是普通div元素，你只给它设置了width: 200px，但Flex子项默认flex-shrink: 1（允许收缩），且空div没有默认最小宽度限制，伸缩表现和input完全不一致，导致第二行三个子项（两个input+一个spacer）的间隙分配和第一行不匹配，直接表现就是第二行第二个input错位。
3. 用来强制换行的.new-row空div默认会参与gap计算，会在上下各生成一个行间距，额外干扰布局计算，也会导致行间距不符合预期。
4. 多数浏览器中input元素默认自带border、padding和外边距，如果不统一盒模型，input的实际渲染宽度会比200px大，和spacer的宽度不匹配，也会加剧错位问题。

不需要修改HTML结构，也不需要用Grid，调整CSS属性统一子项的伸缩规则即可：

/* 统一网格内元素盒模型，避免padding/border撑大元素宽度 */
.my-grid * {
  box-sizing: border-box;
}

.my-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 1rem;
  background-color: #808080;
  justify-content: space-between;
}

.item {
  /* 固定尺寸，禁止Flex自动伸缩改变宽度 */
  flex: 0 0 200px;
  /* 重置浏览器默认input外边距，消除尺寸偏差 */
  margin: 0;
}

.new-row {
  flex-basis: 100%;
  height: 0;
  /* 清除默认盒属性，避免参与gap计算占用额外空间 */
  margin: 0;
  padding: 0;
  border: none;
}

.spacer {
  /* 和.item保持完全一致的伸缩属性，固定宽度200px */
  flex: 0 0 200px;
  /* 隐藏占位元素，不响应交互不占高度 */
  visibility: hidden;
  height: 0;
}

修复后，第二行的spacer和第一行的input在Flex计算中尺寸、伸缩属性完全一致，两行的间隙分配完全相同，自然就对齐了，所有断点下的换行效果也会和之前保持一致。

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