Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Lista de exercícios: Flexbox

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos e atividade Lista de exercícios

por Fatima Dias Viana
| 29.8k xp | 45 posts

  1. Ajustando a altura da tela com CSS Insira aqui a descrição dessa imagem para ajudar na acessibilidade

  2. Controlando o tamanho de elementos com Box Sizing Insira aqui a descrição dessa imagem para ajudar na acessibilidade

  3. Criando um layout sem scroll

body{
    height: 100vh;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
    justify-content: center;
    align-items: center;

}
  1. Flexbox: alinhando textos e imagens
.apresentacao{
    display: flex;
    align-items: center;
    justify-content: space-between;

}
  1. Flexbox: Centralização vertical
.titulo-destaque{
    color: #22D4FD;
    display: flex;
    align-items: center;

}
  1. Flexbox: responsividade e alinhamento
.titulo-destaque{
    color: #22D4FD;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;

}
1 resposta
solução!
por Rafaela Petelin Silvério
| 744.4k xp | 1663 posts
Alura Scuba Team Monitora de Fórum

Oi, Fatima! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura!

Parabéns, você trabalhou bem ao utilizar o flexbox para alinhar os elementos de forma responsiva. O uso do justify-content: space-between; na classe .apresentacao ajudou a distribuir bem os itens na tela.

Uma dica interessante é usar gap para criar espaçamentos entre os elementos sem precisar de margin. Veja este exemplo: 


.apresentacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; /* Espaçamento entre os itens */
}

Isso melhora a organização do layout, deixando o código mais limpo.

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