列的动态数量，全部居中，内部左对齐

Question

我在一些容器内有许多瓷砖，都是相同的静态宽度和高度。容器的宽度是动态的。瓷砖的数量是动态的。我需要瓷砖来包装＆＃34;这样，尽可能多地适合每一行，但是当瓦片的数量填满容器的宽度时，会创建一个新行。整行的瓷砖应居中。未填满的一行图块应与整行保持对齐（或者将其定位为完整并居中）。见下图。

在此图中，绿色代表容器，黑色代表瓷砖。

我可以通过在容器上创建切片inline-block并使用text-align: center来实现。但是，这就像以下一样：

这是一个代码示例。我能够对HTML进行必要的更改。

＆＃13;

＆＃13;

.container {
  border: 5px solid #0f0;
  width: 250px;
  text-align: center;
}

.tile {
  margin: 3px;
  display: inline-block;
  border: 5px solid #000;
  width: 50px;
  height: 40px;
}

＆＃13;

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

TL; DR

有一种方法可以使用CSS Grid Layout。必须将以下属性放入父元素，即此方案中的.container元素：

display: grid;
grid-template-columns: repeat(auto-fill, 60px);
grid-gap: 10px;
justify-content: center;

一些解释和细节

我已经尝试了很多工作，但最后我只是成功使用了我第一次使用的CSS网格布局。我敢打赌，有更多读者不熟悉上述属性，因此我将为每个属性添加一两行解释。

display: grid;

除browser support中的限制外，没有什么可说的。

grid-template-columns: repeat(auto-fill, 60px);

  

grid-template-columns CSS属性定义网格列的行名称和轨道大小调整功能。

这个属性有点复杂，因为它的值有很多不同的选项。这里我们使用repeat()函数，该函数需要列数作为第一个参数，每个列单元格的宽度作为第二个参数。幸运的是，可以使用auto-fill定义变量列号。 60px的宽度是.tile的宽度（宽度为50px，边框为10px）。

grid-gap: 10px;

  

grid-gap CSS属性是grid-row-gap和grid-column-gap的简写属性，用于指定网格行和列之间的装订线。

要为列和行定义不同的间隙宽度，可以使用grid-gap: 5px 10px;，其中第一个值用于行间距。我为此示例随机选择了10px。

justify-content: center;

最后，如果周围有空间，请告诉浏览器将容器的内容（网格）居中。此属性与CSS网格布局无关。它通常用于flexbox场景，但在这里也像魅力一样。

演示

我将所描述的四个属性添加到.container并删除了.tile的边距和宽度。在Firefox 52和Chrome 57中测试了解决方案。

.container {
  border: 5px solid #0f0;
  width: 250px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 60px);
  grid-gap: 10px;
  justify-content: center;
}

.tile {
  display: inline-block;
  border: 5px solid #000;
  height: 40px;
}

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

很高兴知道

在FF开发者控制台（F12）中，有一个内置的网格荧光笔，可以轻松调试已定义的网格：

Answer 2

您可以使用flexbox，但如果最后一行没有足够的元素，您将遇到与内联块类似的问题。

你可以使用：before和：after来填写最后一行，但是如果最后一行中缺少2个以上的元素，那么它将完全没有帮助。

＆＃13;

＆＃13;

div {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

div > * {
  margin: 1rem;
}

div::before,
div::after {
  background: red; /* For demo only */
  display: block;
  content: "";
  width: 200px;
  height: 200px;
  margin: 1rem;
  order: 99999999;
}

＆＃13;

<div>
<img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200">
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：看看我自己的例子，我意识到这并不能解决你的问题。除非它以任何方式帮助你，否则我将删除此帖子。

Edit2：您可能实际上必须解决使用JS添加一些空div来填补空白。这应该有用，虽然我绝对认为这是一个丑陋的黑客。

Answer 3

请你试试下面的内容，

＆＃13;

＆＃13;

.container {
  border: 5px solid #0f0;
  width: 250px;
}

.tile {
  margin: 5px 10px;
  display: inline-block;
  border: 5px solid #000;
  width: 50px;
  height: 40px;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我所做的就是从text-align课程中删除.container并将其移至.tile课程。添加了空格元素。您可以根据需要调整5px 10px。能够将输出与您的输出相匹配。如果有效，请告诉我。