Как расположить блоки с помощью flexbox на одинаковом расстоянии друг от друга?

Question

[weranda]

Приветствую

Что-то не могу понять как с помощью свойств flexbox разместить вложенные блоки таким образом, чтобы они не отступали от границ родительского блока, а при уменьшении размеров родительского блока размещались бы в две строки и также, как и в первом случаи имели бы одинаковые отступы друг от друга и не отступали бы от границ родительского блока.



Как?

Answer 1

[GreatRash]

justify-content: space-between;
align-content: space-between;

Comments

[weranda]

GreatRash Смотрите https://jsfiddle.net/4fj00shu/3/ Сделал, но отступы все равно есть. Если убрать margin, то блоки слипнуться и нужного расстояния между ними не будет. Поясните пожалуйста.

[GreatRash]

weranda: Ну для начала flex: 0 1 150px;

[weranda]

GreatRash: А можно какое-то фиксированное значение задать в пикселях между блоками в этом случае, чтобы расстояние между ними не менялось или это бесполезно?

[GreatRash]

weranda: Только маргинами, но это вам не подходит.

Answer 2

[Евгений]

Возможно как-нибудь так:
https://jsfiddle.net/jLvegoku/
Либо добавить ещё MQ