значки, которые равномерно распределены по сетке

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%. Измените значение на основе размера экрана, используя медиа-запросы.

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