Javascript 均匀分布箱子，但每个箱子之间留有边距

下面是一个类似问题的提琴： 它工作得很好，但是，我想在盒子之间有一些很好的间隔。如果将右边距视为方框之间的最小间距，这样如果间距低于该值，则可以将所有内容向下移动一行。此外，无论哪一行中当前最后一个框，都不应有右边距

然后，一些底边。固定的数量可以，或者等于当前水平间距的数量也可以

$(new Array(9).join('<div class="invisible"></div>\n')).insertBefore('.stretch');

$(window).on('resize', function() {
$('#container').height($('.box').last().position().top +     $('.box').last().outerHeight());

//make it still justify when there's only one row
if ($('.box').first().position().top == $('.box').last().position().top) {
    $('.invisible').hide();
} else {
    $('.invisible').show();
}
}).resize();

$（新数组（9）.join（'\n'））.insertBefore（'.stretch'）；
$（窗口）.on（'resize'，function（））{
$（'#container'）。高度（$（'.box'）.last（）.position（）.top+$（'.box'）.last（）.outerHeight（））；
//当只有一行时，使其仍然合理
if（$（'.box'）.first（）.position（）.top==$（'.box'）.last（）.position（）.top）{
$（'.invisible'）.hide（）；
}否则{
$（'.invisible'）.show（）；
}
}).resize（）；

这不需要JavaScript，只需要负边距：

HTML:

---

因为弹性项目的边距不会折叠，所以如果您像这样在所有边上添加边距，效果最好。

出于任何原因，它必须以这种方式工作吗？性能非常糟糕，我不清楚你为什么需要javascript来实现这一点。这是一个缩略图库，我想响应。在现实生活中，彩色框将是img缩略图。除了盒子之间的间距外，现在的小提琴已经足够好了。我需要有作为最小页边距的页边距。在chrome中工作，而不是在FF25中。这是因为Firefox不支持使用Flexbox包装。即使你不使用Flexbox，负边距仍然是解决方案：你使用了“Flexbox”标签，我想你知道你在问什么，Firefox只有部分实现。我使用了这个，因为我认为可能有一个js脚本可以诱使浏览器做正确的事，wrt Flexbox。由于浏览器的支持，我并没有对它进行过太多的研究，但我学到了足够多的知识，知道如果浏览器支持的话，flex box将是答案。我不明白的是，为什么你给我的密码笔在ff中不起作用。我不明白为什么这对我有用。我建议你把你关于我的笔不能在Firefox中使用的问题告诉Mozilla团队，因为问题出在他们身上。如果Flexbox答案不是您真正想要的，我建议您从问题中删除Flexbox标签。

.gallery {
  margin: -5px;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
@supports (flex-wrap: wrap) {
  .gallery {
    display: flex;
  }
}

.gallery img {
  margin: 5px;
}

<div class="gallery">
    <img src="http://placehold.it/200x100" />
    <!-- etc -->
</div>