Entrar Ainda não tem acesso?
2
respostas

quebra de layout

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Flexbox e atividade Flexbox na página inteira

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

Minha solucao para atividade proposta foi diferente. Eu mexi somente no .navegacao-site utilizando flexbox e cheguei a este resultado:

.navegacao-site {
    width: calc(0.9 * 300px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: 1;
    padding-top: calc(300px + 1rem);
}

.navegacao-site h1 {
    flex-basis: 100%;
}

.navegacao-site nav {
    flex-basis: 100%;
}

.navegacao-site ul {
    flex-basis: 100%;
}

Ao ver a solucao do instrutor, eu apliquei ela e isto quebrou o layout do .navegacao-site na qual apliquei o flexbox. Porque isto ocorreu?

2 respostas
por Instrutor
| 1136.9k xp | 1471 posts
Instrutor

Tiago, boa tarde!

Você colocou display: block no elemento body e retirou o display: flex conforme foi indicado pelo instrutor? Pois mantê-lo irá quebrar o layout do site.

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

Felipe, minha solução foi diferente da do professor. Eu não deixei todo layout com flexbox, apenas o nav porque foi o que a atividade solicitou. E funcionou a minha solução, mas, ao seguir da maneira que o instrutor fez, quebrou a minha solução fazendo com que o meu nav ficasse desalinhado que é a minha dúvida de saber qual o motivo disto.

Aproveitando, porque deveria ser colocado display: block no body para ajeitar o layout quebrado pela solução do instrutor?