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

[Projeto] Solução proposta

Referente ao curso Praticando CSS: Grid e Flexbox, no capítulo Hello Flex! e atividade Desafio: centralizando uma div

por João Lino Adão Manuel
| 91.8k xp | 73 posts
Chief Operations Officer

Olá,

Desafio para dar aquela alfinetada na galera do Back-end resolvido. hehhehe 

main {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

Primeiro foi necessário definir o container como um flex container para desbloquear as propriedades flex de alinhamento vertical e horizontal, depois disso foi mamão com açúcar provando mais uma vez as facilitades que o flex trás consigo. O mesmo não se pode dizer o float LOL.

Segue o link do codePen: https://codepen.io/linusmanuel/pen/RweRBRr

1 resposta
solução!
por Lorena Garcia
| 8364.6k xp | 12215 posts
Alura Scuba Team Suporte Educacional

Oi João, tudo bem?

Parabéns por ter resolvido o desafio e por compartilhar sua solução conosco! Realmente, o uso do Flexbox traz muita facilidade para o alinhamento de elementos em um layout. Além disso, o uso do vh e vw para definir a altura e largura do container é uma ótima prática para garantir que o layout fique responsivo em diferentes tamanhos de tela.

O float é difícil de lidar né kkkk.

Continue praticando e explorando as possibilidades do CSS Grid e Flexbox, são ferramentas muito úteis para o desenvolvimento de layouts modernos e responsivos.

Um abraço e bons estudos.