Как на flexbox сверстать такой блок?

Question

[anisimov]

Привет всем! есть такой блок в дизайне, как его правильно сверстать что бы на адаптиве еще и проблем не было?

img

Answer 1

[Сергей delphinpro]

Я бы сделал как-то так

Comments

[anisimov]

только это решение на гридах, а не на флексах)

[Сергей delphinpro]

anisimov, Тут все зависит от того, какую задачу вы решаете. Если практическая - то я показал решение. Если чисто академическая, делать на флексах, то мой ответ мимо.

[Сергей delphinpro]

Ну и еще, вы можете использовать из этого примера принцип адаптации под мобильник.

Answer 2

[Акбар Ильхамбаев]

https://habrastorage.org/webt/5f/a9/17/5fa9178093a...>

header {
display : flex;
} // большой блок на картинке
div {
display : flex;
flex-direction : column ;
align-items : center ;
} // Маленькие блоки

Answer 3

[Максим Щирба]

Как то так, поменяй классы, значения и доделай
https://codepen.io/caest/pen/xxVmyav