Не могу понять как работает flex?

Question

[Никита Нафранец]

Прочитал статьи разные на хабре да и на других сайтах. Хочу попробовать сверстать шаблон на flex. Но если grid логика понятна и проста, то flex у меня вызывает одно сплошное недопонимание.
Например я хочу реализовать такой макет

Если в grid все понятно сначала ряд, а потом колонки. Как таблица.

То на флексе такая логика не работает. Может кто-нить объяснить как реализовать такой шаблон на флексе? Заранее спасибо.
Я вроде бы смог шапку сделать на флексе, но что-то мне кажется я делаю не правильно codepen.io/anon/pen/KVgxwy#0

Answer 1

[Кирилл]

Поиграйтесь тут: flexboxfroggy.com/#ru
Прочитайте это: html5.by/blog/flexbox
Если после этого останутся вопросы, то я не знаю что с вами не так.

Answer 2

[asd111]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/