图标，它们在网格中均匀分布答案

【问题标题】：icons, which are equally distributed across the grid图标，它们在网格中均匀分布
【发布时间】：2015-10-24 01:27:47
【问题描述】：

是否可以仅使用 CSS 来平均分配图标？

我想得到这个结果（我没有发布图片的声誉）

http://i.stack.imgur.com/bC0Aw.jpg

我找到了一个使用 javascript 的解决方案：

_http://jsfiddle.net/VLr45/59

我尝试了 flexbox，但得到了这个

http://jsfiddle.net/egns7cj1/
http://jsfiddle.net/egns7cj1/2/

http://i.stack.imgur.com/h8tU2.jpg

【问题讨论】：

请贴出你目前尝试过的代码。
欢迎来到 Stack Overflow！寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码在问题本身中。 注意 - 请不要滥用代码块来绕过这个要求。
@RüdigerHerrmann 我添加了指向 jsfiddle 的链接
喜欢这个？ jsfiddle.net/egns7cj1/3
@ManojKumar 物品应该从左到右放置i.stack.imgur.com/M6alC.jpg

标签： css html grid material-design flexbox

【解决方案1】：

将项目包装在另一个具有flex-basis: 33% 的父项中。使用媒体查询根据屏幕大小更改值。

.flex-container {
  flex-flow: row wrap;
  display: flex;
  width: 100%;
  height: 320px;
  border: 1px #eee solid;
  background: #ffd54f;
}
.inner-container {
  display: flex;
  flex: 0 0 33%;
  justify-content: center;
}
.item {
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  background: #fff;
  border: 1px #777 solid;
}
@media (min-width: 991px) {
  .inner-container {
    flex: 0 0 25%;
  }
}
@media (min-width: 1200px) {
  .inner-container {
    flex: 0 0 20%;
  }
}

<div class="flex-container">
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>
  <div class="inner-container">
    <div class="item"></div>
  </div>

</div>

【讨论】：

使用这种方法我们有一个固定的列数：列 33% - 3 列，25% - 4 列等。有没有办法让列数浮动，取决于宽度
就像使用justify-content: space-between时一样