为什么flexbox布局换行后行与行之间存在多余垂直间距？

原因说明 #

造成换行后上下行存在多余垂直间距的核心原因有3个：

• 开启换行的flex容器未显式设置align-content属性，该属性默认值为normal，在父容器存在多余垂直空间时会自动分配行间距，不会让多行紧贴对齐
• input作为原生表单元素，浏览器会默认添加上下外边距，产生额外间距
• 未显式声明盒模型，默认的box-sizing: content-box会让设置的padding: 10px额外叠加到height: 44px上，最终input总高度超出预期，看起来行间距更大

修复方案 #

1. 修改flex容器样式，显式设置多行垂直对齐规则

<div
  style={{
    display: "flex",
    justifyContent: "space-between",
    width: "618px",
    flexWrap: "wrap",
    alignContent: "flex-start" // 新增：让多行在交叉轴顶部紧贴对齐
  }}
>
  <input className={"input_3"} />
  <input className={"input_3"} />
  <input className={"input_3"} />
  <input className={"input_3"} />
</div>

2. 修改input样式，清除默认样式并统一盒模型

.input_3 {
  width: 272px;
  padding: 10px;
  height: 44px;
  margin: 0; // 清除浏览器默认给input添加的边距
  box-sizing: border-box; // 让height包含padding，避免总高度超出预期
  vertical-align: top; // 可选：消除基线对齐带来的1-2px细微间距
}

内容的提问来源于stack exchange，提问作者János。