图标，在网格中均匀分布

Question

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

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

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%。使用媒体查询根据屏幕大小更改值。

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

图标，在网格中均匀分布

icons, which are equally distributed across the grid

html

css

grid

flexbox

material-design