Solucionado
Porque foi utilizado o display flex duas vezes? Foi utilizado no body e depois na tag main, se utilizar o flex no body ele já não aplicaria para toda a página?
<body class="bg-azul-claro font-inter flex justify-center items-center h-screen">
<main class="flex"> <!-- porque este flex novamente -->
</main>
</body>
Oi Guilherme! Tudo bem?
Entendo sua dúvida em relação ao uso do display: flex duas vezes em um mesmo documento HTML. Na verdade, o display: flex é uma propriedade muito poderosa do CSS e pode ser usada em diferentes elementos da página, não apenas no body.
No seu exemplo, ao utilizar o display: flex no body, você está fazendo com que todo o conteúdo da página seja centralizado horizontalmente e verticalmente, já que também foi utilizado justify-center e items-center. Mas isso não significa que o flex aplicado ao body será automaticamente aplicado a todos os elementos filhos do body.
Ao usar o flex novamente no elemento main, você está definindo um novo contexto de layout para os elementos filhos dentro do main. Ou seja, ao invés de utilizar as propriedades de alinhamento padrão do block (que é o valor padrão do display), o main agora será organizado em um layout de flex.
Essa abordagem pode ser muito útil para alinhar os elementos filhos do main de uma forma mais flexível e dinâmica. Por exemplo, considere o seguinte código:
<main class="flex justify-center items-center">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</main>Ao utilizar display: flex no main e definir justify-center e items-center, estamos fazendo com que todos os elementos filhos do main sejam centralizados horizontalmente e verticalmente. O resultado será algo assim:
________________________
| |
| Item 1 Item 2 |
| |
| Item 3 |
|________________________|Mas se quisermos alinhar os elementos filhos em uma única linha, basta adicionar a propriedade flex-direction: row ao main, ficando assim:
<main class="flex justify-center items-center flex-direction-row">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</main>Agora teremos:
________________________
| |
| Item 1 Item 2 Item 3|
| |
|________________________|Perceba como o uso do display: flex no main possibilitou uma flexibilidade maior para o alinhamento dos elementos filhos.
Em resumo, utilizar o display: flex em mais de um elemento pode ser muito útil para criar diferentes contextos de layout em uma mesma página, possibilitando uma maior flexibilidade no alinhamento dos elementos.
Espero que tenha te ajudado!
Um abraço e bons estudos.
Ahh sim, entendi. Muito obrigado