Как сверстать такую секцию?

Question

[Crushing]

Сама секция:


Как ее сверстать при помощи флексов так, чтобы было адаптивно? Как без нормального адаптива сделать я знаю, а вот как сделать что бы получалась адаптивно не могу понять .

Желательно пример какой-нибудь.

Answer 1

[Ярослав Иванов]

На таблицах https://jsfiddle.net/space2pacman/jnrL1hmk/

Answer 2

[Андрей Федоров]

Держите. https://codepen.io/aliencash/pen/gXWpZG

Comments

[Crushing]

Спасибо, но тут с адаптивом проблемы какие-то

[Андрей Федоров]

Разберитесь в моем коде и сделайте себе любой адаптив. Концепцию вам обозначили.

[Андрей Федоров]

https://codepen.io/aliencash/pen/NwjRBR?editors=1100

[Crushing]

Андрей Федоров, Это я так понимаю css-grid?

[Андрей Федоров]

Crushing, определенно.

Answer 3

[tema_sun]

А в чем проблема? Сначала надо в принципе определиться что-куда будет двигаться. Там где надо меняете flex-direction, блокам ставите ширину 100%. При необходимости используете order для флексов.

Comments

[Crushing]

prntscr.com/h9cysh - Вот так я составил в помощью флексов. prntscr.com/h9cysh

Вот такое происходит при адаптиве на средних экранах при помощи свойства flex-wrap:wrap prntscr.com/h9cz79 это не очень красиво, а как от такого избавиться и сделать что б картинки в столбик стали я не знаю. Ведь display:block не задать.

[tema_sun]

Crushing, давай кодом, где-нибудь jsfiddle, а?

Чтобы в столбик - flex-direction: column