treinando | HTML e CSS: Classes, posicionamento e Flexbox

Altura total da tela (100vh)
CSS:
css
Copiar
Editar
body {
margin: 0;
height: 100vh;
background-color: black;
color: white;
}
100vh = 100% da altura da viewport (a tela visível).

Use o "Inspecionar" no navegador e veja se o body ocupa toda a altura da tela.

Box Sizing com border-box
CSS:
css
Copiar
Editar

{
box-sizing: border-box;
}
Por quê usar *? Aplica para todos os elementos, inclusive os filhos do body.

Layout sem scroll (2 blocos lado a lado)
HTML:
html
Copiar
Editar

Bloco Esquerdo

Bloco Direito

CSS: css Copiar Editar body { margin: 0; height: 100vh; display: flex; background-color: black; color: white; }

.bloco-esquerdo,
.bloco-direito {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
border: 1px solid white;
}
Assim, os dois blocos ocupam meia tela cada um, sem scroll.

Flexbox: textos e imagens lado a lado
HTML:
html
Copiar
Editar

Este é o meu texto.

CSS: css Copiar Editar .container { display: flex; justify-content: space-between; align-items: center; padding: 20px; }

.texto {
width: 50%;
font-size: 18px;
}

.imagem {
width: 40%;
max-width: 300px;
height: auto;
}
Flexbox: Centralização vertical
HTML:
html
Copiar
Editar

Item 1

Item 2

CSS: css Copiar Editar .container { display: flex; align-items: center; /* Alinha verticalmente */ justify-content: center; /* Alinha horizontalmente */ height: 300px; background-color: #222; color: white; } Flexbox: Responsividade com quebra de linha HTML: html Copiar Editar

Conteúdo 1

Conteúdo 2

Conteúdo 3

CSS: css Copiar Editar .responsivo-container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }

.responsivo-container > div {
background: #f0f0f0;
padding: 20px;
flex: 1 1 200px; /* Flexível, mínimo 200px */
}

Oi, Vanessa! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Você aplicou muito bem os conceitos de flexbox, viewport e responsividade. A estrutura clara e bem comentada do seu código facilita o entendimento e mostra um ótimo domínio da aula.

Uma dica interessante para o futuro é explorar a propriedade gap também no eixo principal ao usar flexbox. Ela ajuda a manter espaçamentos consistentes sem precisar de margin.
Veja este exemplo:


.container {
  display: flex;
  gap: 20px;
}

Esse código cria um espaçamento de 20px entre os elementos filhos, simplificando o layout.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!