Как сверстать такой макет на Flexbox?

Question

[ivankalita]

Необходимо сверстать такой макет.
ВОПРОС: можно ли добиться такого адаптива при помощи flexbox или всё-таки единственный выход Gridы??
Декстоп (min-width 768рх):

Мобилка:

Comments

[Шохрух Шаймардонов]

Добиться можно, но легче в данном случае будет гридом

[ivankalita]

Шохрух Шаймардонов, подскажи пожалуйста тогда такой момент, как в гридах размеры ячеек устанавливать в зависимости от размера контента или это в принципе не предусмотрено (гриды на то и гриды)?? Реальная ситуация такова, что item1 - шапка навигации, item2- блок с текстом, item3 - картинка

Answer 1

[origami1024]

Можно всё на flex, и без дублирований, вота.

Comments

[ivankalita]

origami1024, это у вас в заготовках было или как Вы так быстро это всё верстаете?)) Спасибо большое

[origami1024]

ivankalita, угу, была заготовочка

[ivankalita]

origami1024, зачёт, красаучик

[origami1024]

ivankalita, еще можно немного левого css будет выкинуть, когда время будет)

[ivankalita]

origami1024, друг, смотри, а как мне 3ий блок вставить между 1ым и 2ым?

[origami1024]

Евгений Корякин, да, вот это я докрутил чуть попозже в пример, может у ivankalita старая версия открыта была

Answer 2

[Рома Зварич]

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

На Flexbox можно этого добиться дублированием нужного блока и отображением одного из них на каждом разрешении экрана.
Пример на Flexbox:
https://codepen.io/hisbvdis/pen/eYYGOQd

Пример на Grid:
https://codepen.io/hisbvdis/pen/ZEEXzgB

Comments

[ivankalita]

Рома Зварич, согласен с Вашим решением на 100%, но считается ли первый вариант (на flexbox) best practics или стараться избегать таких решений?
Спасибо большое за отклик