O principal objetivo do post é entender se existe algum processo lógico para pensar a construção de um layout do HTML ou CSS que eu deveria saber ou se é só uma questão de prática mesmo.
E como vocês construiriam esse layout utilizando apenas flexbox?
Eu, particularmente, gosto de verificar se existe uma quebra de linha, como no caso do 0, 1, 2 e 3. Então tudo deve ser uma ROW. enquanto o resto não precisa. Apenas com Cols, se resolveria (pois não há quebras de layout).
E, nesse caso aí, as cols 0, 1 e 4 devem ter 100% de largura, enquanto as cols 2, 3, 5 e 6 devem ter 50% de largura.
(100% de largura seriam col-12 no estilo Bootstrap, e 50% de largura seria col-6)
Espero ter ajudado!
Olá Salom4N!
Leva um tempo para aperfeiçoar o uso do Flexbox, mas o Devtools ajuda muito na visualização. (principalmente sendo uma ferramenta real time)
Como você pode observar, ele consegue adicionar na sessão como seria o seu elemento com as customizações Flexbox nela. Depois de ter feito os ajustes basta copiar e colar dentro do seu código as implementações.
Existem alguns tutoriais que ajudam a entender o uso do mesmo, como este por exemplo, que vai te ajudar a reconstruir este modelo!