[Projeto] Mão na massa: Posicionando mais elementos

1 Ajustando a altura da tela com CSS

body{
    height: 100vh;
    }

2 Controlando o tamanho de elementos com Box Sizing

body{
    height: 100vh;
    box-sizing: border-box;
    }

3 Criando um layout sem scroll

body {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

4 Flexbox: alinhando textos e imagens

<main class="container">
  <p class="texto">Texto aqui...</p>
  <img class="imagem">
</main>

.container {
  display: flex;
   align-items: center;
  justify-content: space-between;
}

5 Flexbox: Centralização vertical

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- Mais itens aqui -->
</div>

.container {
  display: flex;
  align-items: center;
  height: 300px; 
}

6 Flexbox: responsividade e alinhamento

<div class="responsivo-container">
  <div>Conteúdo 1</div>
  <div>Conteúdo 2</div>
  <!-- Mais conteúdos -->
</div>

.responsivo-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}