Как построить такой layout на флексбоксе?

Question

[Алексей Струков]

Столкнулся с задачей и не могу понять как её решить)
На мобиле блоки должны выстроиться как на рис.1
На десктопе - как на рис.2
Сделать необходимо на флексбоксе, если это возможно.
Вариант с фиксированной высотой контейнера не подходит.

Answer 1

[Николай]

Насколько я понимаю - только на 2 контейнера побить
https://jsfiddle.net/bgd8khcq/4/

Comments

[Алексей Струков]

не адаптируется что-то ((
да и расположение блоков не такое, как требуется

[Николай]

обновил

[Алексей Струков]

Николай: к сожалению, это не то ((
Нужно перемещать блок, который посередине

[Николай]

Алексей Струков: так при помощи flexbox не сделать.

[Алексей Струков]

Николай: я так и думал. Нашел способ только с position: absolute и то работает лишь при определенном условии

Answer 2

[Андрей]

Без понтов, но работает codepen.io/AndrewHaze/pen/BQMJYb

Comments

[Алексей Струков]

к сожалению, не так, как требуется ((
Во первых - высота блоков должна быть автоматическая.
Во вторых - высота контейнера должна быть автоматическая.
Если первый блок имеет допустим высоту 200 пикселей, а третий - 300, то второй блок должен растягиваться на всю высоту контейнера через какой-нибудь align-items: stretch; или типа того.

[Андрей]

Ну вы хотите чтобы за вас прямо всё сделали :)

[Алексей Струков]

Андрей: а что там делать то?)
Мне было интересно возможно ди это в принципе и, судя по всему - нет. Одним флексом этого не добиться.

[Андрей]

Алексей Струков: я сделал как на картинке, а у вас оказывается куча нюансов.. :)
Если контент статичный, то можно сделать отдельно для каждого случая и просто переключатся через media

Answer 3

[Mikhail Osher]

Решать за вас не буду, но вот что делаете.
На мобилке это обычных 3 блока.
На десктопе - flex + flex-direction=column + flex-wrap=wrap + order каждому элементу.

Comments

[Алексей Струков]

А как flex-wrap будет работать если у блока нет фиксированной высоты?

[Mikhail Osher]

Алексей Струков: оооо, сорри, упустил это условие. нет, невозможно без высоты.

[Алексей Струков]

Mikhail Osher: я вот тоже думаю что невозможно, но на всякий случай решил спросить у людей - вдруг что-то упускаю.

[Амир Алимжанов]

Алексей Струков: а высоту в процентах?

[Алексей Струков]

Амир Алимжанов: не совсем, высота должна распределяться равномерно между блоками и растягивать их в высоту, заполняя контейнер с помощью свойства типа align-items: stretch; Поэтому и желательно это сделать на флексах.