如何消除Flex布局中2号与3号盒子之间的空隙？

你遇到的2号和3号盒子之间的空隙，来自flex容器.wrapper设置的gap:10px属性，该属性会在所有flex项目之间（同行、跨行）添加统一间距。以下是针对性的解决方法：

方案1：移除全局间距（适合不需要任何横向空隙的场景） #

直接删除.wrapper中的gap:10px，所有盒子间的空隙都会消失：

.wrapper {
  display:flex;
  flex-wrap:wrap;
  max-width:320px;
  justify-content:flex-end;
}
.box {
  width:150px;
  height:150px;
  background:black;
  color:white;
}
.open {
  height:500px;
}

方案2：保留1号与下方的纵向间距，仅消除2、3号间的空隙 #

如果需要保留1号盒子和下方的纵向间距，同时让2、3号紧贴，可选择以下方式：

方式A：给1号盒子单独设置底部间距 #

移除gap属性，只为.open添加底部间距：

.wrapper {
  display:flex;
  flex-wrap:wrap;
  max-width:320px;
  justify-content:flex-end;
}
.box {
  width:150px;
  height:150px;
  background:black;
  color:white;
}
.open {
  height:500px;
  margin-bottom:10px;
}

方式B：改用Grid布局精准控制行/列间距 #

将容器改为Grid布局，仅设置行间距，不设列间距：

.wrapper {
  display:grid;
  grid-template-columns: repeat(auto-fit, 150px);
  max-width:320px;
  row-gap:10px;
  justify-content:flex-end;
}
.box {
  width:150px;
  height:150px;
  background:black;
  color:white;
}
.open {
  height:500px;
  grid-column: 1 / -1; /* 让1号盒子占满整行 */
}

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