图标，均匀分布在网格中

Question

是否可以仅使用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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;