具有动态宽度和动态项目

Question

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

我有一个容器，可以调整到最大和最小宽度。内部的项目有固定的宽度，但并不总是相同。在中，我想重用网格，以便它对齐我放在那里的任何东西。

这是我的预期结果：

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

我尝试使用带有对齐内容空间的Flexbox并最终得到：

我找到了几个解决方案，例如添加尾随隐藏物品。但这是一个被我们的审核流程拒绝的解决方案。

如何实现此布局？我正在使用Angular 4，我对任何基于Javascript / CSS的解决方案都持开放态度。严格没有Jquery。

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

Answer 1

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

这是一个片段，展示了如何运作：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请注意，每个容器中的最后一个元素<div style="clear: both"></div>仅用于确保容器自动获得所需的高度。

[Codepen]：https://codepen.io/anon/pen/gXMXma