javascript - 具有动态宽度和动态元素数的网格

Question

我正在尝试创建一个网格，我一直在寻找使用 Flexbox 和 CSS Grid 的几种解决方案，但这些解决方案都不适合我，这就是我发布此内容的原因。

我有一个容器，它可以调整到最大和最小宽度。里面的元素有固定的宽度，但并不总是相同。比如，我想重复使用网格，以便它对齐我放入其中的所有内容。

这是我的预期结果:

我不想使用 CSS Grid，因为我需要它来支持真正旧版本的 Chrome、Firefox 和 Safari。

我尝试将 Flexbox 与 justify-content space-around 结合使用，结果如下:

我找到了几种解决方案，例如添加尾随不可见项。但这是一个被我们的审核流程拒绝的解决方案。

如何实现这种布局？我正在使用 Angular 4，并且我愿意接受任何基于 Javascript/CSS 的解决方案。绝对没有 Jquery。

编辑:我希望行为类似于 justify-content: space-between 但正如我之前提到的，我的上级不接受修复最后一行的解决方案。

Answer 1

为此，您可以使用 float 框作为宽度可变的容器的子项。

这里有一个片段展示了它是如何工作的:

.container {
  width: 450px;
  border: 2px solid blue;
}

.child {
  float: left;
  height: 100px;
  width: 100px;
  background-color: orangered;
  margin: 5px;
}

.container-2 {
  width: 350px;
}

.container-3 {
  width: 250px;
}

.container-4 {
  width: 150px;
}

<div class="container">
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div> 
  
  <div style="clear: both"></div>
</div>

<div class="container container-2">
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div> 
  
  <div style="clear: both"></div>
</div>

<div class="container container-3">
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div> 
  
  <div style="clear: both"></div>
</div>

<div class="container container-4">
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div>  
  <div class="child"></div> 
  
  <div style="clear: both"></div>
</div>

注意最后一个元素 <div style="clear: both"></div>在每个容器中只是为了确保容器自动获得所需的高度。

[代码笔]:https://codepen.io/anon/pen/gXMXma