如何消除不同尺寸div使用flex-wrap时的异常间距？

嗨，我来帮你搞定这个Flex布局在移动端出现奇怪间距的问题！你的需求是基于浏览器分辨率实现两种不同布局，目前移动端的Flex-wrap方案逻辑没问题，但默认的对齐规则导致了多余间距，咱们来调整优化一下：

问题根源 #

你当前的Flex容器用了flex-flow: wrap，但默认的align-content: stretch属性会把所有行的高度拉伸到和最高行一致，这就导致短行的box周围出现了不必要的空白间距。

完整代码实现 #

HTML（保持你的原有结构） #

<div id="box-container"> 
  <div id="box1"></div> 
  <div id="box2"></div> 
  <div id="box3"></div> 
  <div id="box4"></div> 
</div>

CSS（优化后） #

/* 移动端优先：先写小屏幕样式 */
#box-container {
  display: flex;
  flex-flow: wrap;
  /* 核心修复：让行按自身高度排列，消除强制拉伸的间距 */
  align-content: flex-start;
  /* 可选：让每个box在单行内垂直居中 */
  align-items: center;
  /* 用gap替代margin，更可控的box间距 */
  gap: 10px;
  padding: 10px;
}

/* 统一设置box基础样式 */
#box1, #box2, #box3, #box4 {
  /* 移动端每行放2个，自动适配屏幕宽度 */
  flex: 1 1 calc(50% - 10px);
  height: 100px; /* 示例高度，可按需修改 */
}

#box1 { background-color: cyan; }
#box2 { background-color: magenta; }
#box3 { background-color: yellow; }
#box4 { background-color: black; }

/* 桌面端布局：屏幕宽度≥768px时生效 */
@media (min-width: 768px) {
  #box-container {
    flex-flow: row nowrap; /* 桌面端不换行，横向排列 */
    justify-content: space-around; /* 桌面端的元素对齐方式 */
  }
  
  #box1, #box2, #box3, #box4 {
    flex: 0 0 auto; /* 固定宽度，不拉伸 */
    width: 200px;
  }
}

关键调整说明 #

• align-content: flex-start：彻底解决间距问题的核心，它让Flex容器的每行只占据自身内容的高度，不再强制拉伸到容器高度。
• 移动端优先开发：先定义小屏幕样式，再通过媒体查询覆盖桌面端样式，是响应式开发的高效实践。
• gap属性：替代传统margin来控制元素间距，避免外边距折叠的问题，代码更简洁。
• flex属性适配：移动端用flex: 1 1 calc(50% - 10px)确保每行刚好放下2个box，桌面端切换为固定宽度实现不同布局。

这样修改后，移动端布局不会再有奇怪的空白，同时桌面端能实现完全不同的排列效果，完美匹配你的需求！

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