Нетривиальная расстановка элементов на flexbox без media-запросов

Да, помню, как пробовал решить Вашу задачу, будучи уверенным, что это не так сложно, но на втором часу понял, что тут есть какой-то нетривиальный приём, который не сильно известен, но работает.

Решение однозначно не является тривиальным и это решение однозначно не то, что первым придёт в голову.

То, что такое решение есть вообще и то, что оно было найдено — очень круто.

Спасибо за статью, Дмитрий.

решение, конечно, интересное, но с эпитетами вышел небольной перебор :)

озарение
безумно
чудеса
трудно поверить
фантастический факт
тотальный парадокс
очень интересным

Просто респект! Как раз на днях такая задача попалась, тоже вертел туда-сюда, в итоге забил и поставил медиа-запрос. Попробую переделать)

jsfiddle.net/2p8x1dvf

flex-wrap: wrap;
justify-content: center;

Мне кажется, что в flex-grow играет роль не само значение, а отношение к другим. То есть если все будут по 1 или по 2, будет то же самое, разве нет?

Забавный случай, но задача очень редкая, а результат немного хаотичен. В подавляющем большинстве случаев, хотят чтоб выглядело все одинаково, несмотря на то, что подобные решения позволяют запихнуть максимум контента в отведенное пространство.

Мне статья очень понравилась как пример "outside the box thinking" и важности внимания к мелочам: почти неизвестная (я сам узнал о ней впервые) особенность стандарта, упомянутая лишь вскользь в примечании к спецификации, в умелых руках выручает во вполне реальной практической задаче. И в целом приятно видеть такое подробное и наглядное объяснение, как всё работает. Спасибо!