如何使用CSS和Javascript創建居中的畫廊布局？

Question

我正在嘗試為一系列大小相同的盒子創建一個有吸引力的布局。 盒子的數量會有所不同。 這個想法是將盒子分成行和列，以填充一個容器。 容器的大小隨Web瀏覽器窗口的大小而變化。 通常，您可以使用float: left;輕松完成此操作float: left; 對於每個盒子。 這是皺紋：我希望最后一行，如果不均勻，請居中。

示例：十三盒。 三行，每行四個盒子，第十三個盒子居中於第四行。

我幾乎肯定地說，這已經遠遠超出了CSS領域，甚至CSS3，但是我想知道是否存在Javascript庫或至少知名的算法來處理這種事情。 我對此有一些蠻力的想法，但我猜想其他人已經以一種更為優雅的方式做到了這一點。

即使像能夠挑選出給定框的行和列之類的東西，也將是一個不錯的開始。

Answer 1

假設您的<img />就在.row內部， .row似乎很容易：

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

如果沒有，您仍然可以使用:last-child ，僅類似於：

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

關於實際生成HTML代碼本身，您沒有提供足夠的信息來解決這一問題，但您只能通過生成<img />並將它們的每n個包裝在.row或通過在內部將它們生成而.row .box ，這些樣式將起作用。

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>