如何使用CSS和Javascript制作居中的画廊布局？

Question

我正在尝试为一系列同样大小的盒子创建一个有吸引力的布局。盒子的数量会有所不同。我们的想法是将盒子分成行和列来填充容器;容器大小因Web浏览器窗口的大小而异。通常情况下，您可以使用每个框的float: left;轻松完成此操作。皱纹是这样的：我想最后一排，如果不均匀，可以居中。

示例：十三个盒子。三排四箱，第十三箱位于第四排。

我几乎肯定这已经远远超出了CSS的范围，甚至是CSS3，但我想知道是否有Javascript库或者至少是众所周知的算法来处理这类事情。我有一些非常强力的想法，但我的猜测是其他人已经以更优雅的方式做到了这一点。

即使是能够选出特定盒子的行和列也是一个很好的开始。

Answer 1

假设<img />正好位于.row内，似乎很容易做到这样的事情：

.row:last-child {
  text-align: center;
}

如果没有，您仍然可以使用:last-child，只有：

.row:last-child .box {
  display:block;
  margin: 0 auto;
}

关于实际生成HTML代码本身，您没有提供足够的信息来解决这个问题，但是您可以通过仅生成<img />并将其中每个第n个包装在{{ 1}}或通过在.row内生成它们，这些样式将起作用。

Answer 2

您可以像这样使用CSS flexbox：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
  justify-content: center;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: calc(25% - 20px);
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
</div>