quebra de layout | HTML5 e CSS3 II: Turbinando as suas páginas

2
respostas

por Tiago Bastos Gonçalves

| 97.4k 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 Felipe Moreno Borges

| 1130.9k xp | 1471 posts

Instrutor Desenvolvedor Android/iOS

26/07/2019

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

| 97.4k xp | 123 posts

Backend Developer

02/08/2019

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?