Начал собирать головоломки по вёрстке — сложные или просто затруднительные части макетов. Публиковать их буду здесь и на своей стене «ВКонтакте». Все головоломки будут изначально иметь решение.

Прислать свою головоломку можно любым удобным способом.

Требования к решениям:

Потоковые адаптивные блоки с горизонтальным разделителем (№170313)

Добавлена 13 марта 2017.

Адаптивная последовательность блоков, 1, 2, 3 и 4 в ряд с увеличением ширины вьюпорта (брейкпоинты для примера произвольные, к примеру, 600, 900 и 1200 пикс). Горизонтальные разделители д.б. 100% ширины вьюпорта (см. скрин), а контентные блоки на большом вьюпорте должны занимать фиксированную ширину и центроваться, чтобы в каждой строке первый и последний блоки были визуально шире.

Скрин для средней ширины, на которой блоки и контентная ширина «резиновые» (более узкие ширины отличаются только кол-вом блоков на строку). Скрин для большой ширины, на котором блоки центруются, контентная ширина фиксирована, у первого и последнего блока в строке появляется дополнительное пространство.

Видео с адаптивностью этого примера.

Ответ