Как ровно расположить элементы по сетке?

Question

[skuvaWeb]

У меня есть контейнер, у которого следующие свойства

display: flex;
justify-content: space-between;

У элемента внутри
flex: 0 1 calc(50% - 6px)
Получается следующее


На больших экранах хочу показывать 3 в ряд, но если задать внутреннему элементу
flex: 0 1 calc(33.333% - 12px)
То второй контейнер, где только 2 элемента из-за свойства "space-between" расталкивает элементы по углам, а в центре получается пустое место (скрин ниже)
Вопрос
Как сделать так, чтобы при наличии трех и более элементов в контейнере они вставали по очереди с равными отступами, а при наличии двух шли друг за другом?

Comments

[CODALSD]

align-content: flex-start? родителю
align-items: flex-start

Answer 1

[Михаил Захаров]

Используй не space-between, a flex-start. Просто блокам придется какой-нибудь margin задать, чтобы не липли.

Comments

[skuvaWeb]

Если дать блоку отсуп слева и справа, крайние блоки не будут прилипать к краям контейнера

Answer 2

[Алексей Захаров]

можно так, думаю разберетесь
https://jsfiddle.net/konratnox/w0o4tc83/