Lista de exercícios | HTML e CSS: Classes, posicionamento e Flexbox

Ajustando a altura da tela com CSS Para garantir que o site ocupe 100% da altura da tela, aplicamos a propriedade height: 100vh; no elemento

. O código CSS seria: body { height: 100vh; /* Ocupa 100% da altura da tela / margin: 0; / Remove qualquer margem padrão */ } Teste no navegador utilizando a ferramenta "Inspecionar" para verificar se o body realmente ocupa toda a altura disponível.

Controlando o tamanho de elementos com Box Sizing Para evitar que os elementos filhos ultrapassem os limites do body, usamos box-sizing: border-box;. Isso faz com que bordas e paddings sejam incluídos no cálculo total do tamanho do elemento: body { box-sizing: border-box; /* Inclui padding e border no tamanho total */ }
*, *::before, ::after { box-sizing: inherit; / Herda o valor do body */ } Com isso, todos os elementos respeitarão o tamanho definido.
1. Criando um layout sem scroll Para criar um layout sem scroll, com dois blocos lado a lado centralizados, usamos flexbox e um layout responsivo. O CSS seria: body { height: 100vh; /* Altura total da tela / margin: 0; display: flex; justify-content: center; / Centraliza horizontalmente / align-items: center; / Centraliza verticalmente / background-color: black; / Fundo preto */ }
.container { display: flex; justify-content: space-between; /* Espaço entre os blocos / width: 90%; / Largura total ajustável */ }

.bloco { width: 45%; /* Cada bloco ocupa metade do espaço / height: 100px; / Altura ajustável / background-color: white; / Blocos brancos para contraste */ }

4) Flexbox: alinhando textos e imagens Para alinhar um texto à esquerda e uma imagem à direita, utilizamos flexbox no container: .container { display: flex; justify-content: space-between; /* Espaço entre o texto e a imagem */ align-items: center; /* Centraliza verticalmente */ }
.texto { font-size: 1.2rem; /* Estilo para o texto */ }

.imagem { max-width: 50%; /* Ajusta a largura da imagem / height: auto; / Mantém a proporção da imagem */ }

Texto aqui...
5) Flexbox: Centralização vertical Para centralizar itens verticalmente dentro de um container de altura fixa: .container { display: flex; align-items: center; /* Centraliza verticalmente */ justify-content: center; /* (Opcional) Centraliza horizontalmente */ height: 300px; /* Altura fixa */ border: 1px solid #ddd; /* Apenas para visualização */ }

Item 1

Item 2

Item 3

6) Flexbox: responsividade e alinhamento Para criar um layout responsivo onde os elementos se ajustam em linha ou coluna, usamos flex-wrap combinado com media queries para adicionar responsividade: .responsivo-container { display: flex; flex-direction: row; /* Padrão: elementos em linha */ flex-wrap: wrap; /* Permite quebrar linha se necessário */ gap: 10px; /* Espaçamento entre os itens */ }
@media (max-width: 768px) { .responsivo-container { flex-direction: column; /* Elementos em coluna em telas pequenas */ } }

Conteúdo 1

Conteúdo 2

Conteúdo 3

Cada desafio parecia um degrau para subir o nível e dominar de vez o controle sobre o layout. A parte de ajustar a altura com 100vh foi quase um "abracadabra" da responsividade – tão simples e direto, que dá gosto de ver o resultado na tela. Agora, quando entramos no box-sizing, foi como desvendar um segredo escondido do CSS. Saber que podemos controlar bordas e paddings sem bagunçar os tamanhos foi aquele momento "por que não aprendi isso antes?!". A aplicação prática faz toda a diferença.

O layout sem scroll me fez sentir como uma arquiteta digital. Organizar os blocos lado a lado, centrar tudo e ainda manter o design limpo? Só posso dizer que o CSS tem mesmo suas magias, e o Flexbox é uma delas.

Falando nisso, Flexbox é puro ouro! Alinhar texto e imagem lado a lado foi uma dança harmoniosa no código, e centralizar tudo verticalmente? Perfeito para layouts minimalistas e elegantes. Já a responsividade, com flex-wrap e media queries, é a cereja do bolo. Parece que, com essas ferramentas, criar um site que se adapta a qualquer tela ficou muito mais natural.

Resumindo: Esses exercícios não foram só sobre aprender CSS e Flexbox – foi sobre conquistar o CSS, entender como cada propriedade trabalha em conjunto e deixar o código fluido e inteligente. Dá até aquele gostinho de "quero mais", porque agora tudo é possível com um pouco de criatividade e código bem feito. CSS, estou pronta para te dominar!