javascript - 均匀分配箱子，但每个箱子之间留有余量

这是一个类似问题的小提琴：
http://jsfiddle.net/DougCassidy/Gawe7/
它工作得很好，但是，我想在盒子之间留一些间距。最好将右边距作为盒子之间的最小间距，这样，如果间距降至该数量以下，它将使所有内容向下移动。此外，当前行中最后一个框上的任何一个都不应有右边距。

然后是底部利润。既可以使用固定的数量，也可以使用等于当前水平间距的数量。

$(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();

最佳答案

您不需要JavaScript，只需负边距即可：

http://codepen.io/cimmanon/pen/iHGCd

.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;
}

HTML：

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

因为在弹性项目上边距不会塌陷，所以如果您这样在所有面上都添加边距，则效果最好。

关于javascript - 均匀分配箱子，但每个箱子之间留有余量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19770042/