如何实现Flex项仅保留10px垂直间隙且无外围间隙？排除负margin方案

我来帮你搞定这个问题——要实现Flex子项之间只有10px垂直间隙、容器外围无间隙，同时避开会触发横向滚动条的负margin方案，我们可以通过调整容器和子项的边距设置，再配合盒模型优化来达成目标。

问题分析 #

你提到的.container {margin: 0 -5px}方案之所以会出现横向滚动条，是因为这个设置会让容器左右向外各扩展5px，当容器的max-width加上这额外的10px超出父元素（比如页面body）宽度时，就会触发横向滚动，这个副作用确实挺闹心的。

解决方案代码 #

我们只需要对原代码做两处关键调整，就能完美实现需求：

.container {
  max-width:700px;
  margin: 0 auto; /* 去掉上下margin，实现水平居中且容器外围无间隙 */
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
}

.container > div { /* 更精准的选择器，避免误影响其他元素 */
  min-width:300px;
  background:lightblue;
  border:1px solid blue;
  flex-grow: 1;
  margin:5px 0px; /* 上下各5px，相邻子项垂直间隙刚好10px，左右无margin */
  padding:10px;
  box-sizing: border-box; /* 让min-width包含border和padding，避免宽度溢出 */
}

<div class="container">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>five</div>
</div>

关键调整说明 #

• 容器的margin: 0 auto：替代原来的margin:20px auto，去掉了上下方向的20px间隙，同时保持水平居中，完美满足“容器外围无间隙”的要求。
• 子项的margin:5px 0：上下各设置5px的margin，这样垂直方向上相邻的两个子项之间的间隙就是5px + 5px = 10px，刚好符合你的需求；左右方向不设置margin，避免了水平方向的额外间隙。
• 添加box-sizing: border-box：这个属性让子项的min-width计算包含了border和padding，不会因为内边距和边框导致子项总宽度超出预期，进一步杜绝了横向滚动条出现的可能。

这样调整后，既实现了你要的垂直间隙效果，又完全避开了横向滚动条的问题，而且不需要设置任何响应式断点，非常简洁高效。

内容的提问来源于stack exchange，提问作者Martin Milichovský