o display: flex; não seria no body? Em vez de ser na classe "apresentacao" Alguém poderia me ajudar nessa dúvida? Desde já agradeço.
Solucionado
o display: flex; não seria no body? Em vez de ser na classe "apresentacao" Alguém poderia me ajudar nessa dúvida? Desde já agradeço.
Oi, Gabriel, tudo bem?
No caso do exemplo que você citou, a propriedade display: flex; foi aplicada na classe apresentacao porque os elementos que se queria alinhar (o texto e a imagem) estavam todos contidos dentro do elemento <main> que tinha essa classe.
Se a propriedade fosse aplicada no body, todos os elementos filhos diretos do body se tornariam flexíveis e se alinhariam em uma linha (que é o comportamento padrão do Flexbox), o que pode não ser o desejado em todos os casos.
Aqui está um exemplo prático para ilustrar isso:
<body>
<header>...</header>
<main class="apresentacao">
<div>Texto e botões</div>
<img src="imagem.jpg">
</main>
<footer>...</footer>
</body>
body {
display: flex;
}
Neste caso, o header, o main e o footer seriam alinhados em uma linha, porque são filhos diretos do body. Mas se queremos alinhar somente o texto e a imagem dentro do main, devemos aplicar o display: flex; no main (ou na classe apresentacao), não no body.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!