Как на флексах выстроить три блока в ряд с отступами между ними?

Question

[weranda]

Есть вот такой дизайн блоков:

И я до конца не пойму как их реализовать на флексах. Интересует именно расположение в ряд по три блока с такими условиями:
1. Прижаты к краям обертки (слева и справа).
2. Между блоками есть отступы.

Пока додумался до такого:

.wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item{
    width: 33%;
    flex-grow: 1;
}

Есть ли какое-нибудь правило, которое бы позволяло сделать так как на рисунке выше?
Пока не понимаю есть ли правила, которые позволяли бы делать отступы между блоками, к примеру, по такой логике: блокам задаем min-width:100px + max-width: 200px + их три в ряд, все что между ними — пустое пространство.

Answer 1

[Gimir]

Все правильно, только flex-grow не нужен, у тебя ширина блока уже задана.

Comments

[weranda]

А если ширина одного блока должна быть, к примеру, 15 процентов от ширины родительского блока, то что делать в этом случае? Ведь надо сделать так, чтобы три блока были в одном ряду. Если же все оставить так, как в примере, только ширину изменить на 15 процентов, то в строке будет не три блока. Вот в чем вся суть вопроса.

[Gimir]

То есть у тебя может быть типа 6 блоков и нужно чтобы в одной строке отображалось только 3?

[weranda]

Gimir, так точно.