Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Tag Nav não recebe display Flex

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Introdução ao flexbox e fazendo o cabeçalho e atividade Arrumando cabeçalho

por Estudante
| 251.6k xp | 136 posts

Olá!

Estou com um erro bizarro. O css da aula é super simples:

.cabecalhoPrincipal .container {
    display: flex;
};

.cabecalhoPrincipal-nav {
    display: flex;
}

Mas por algum motivo, o chrome e firefox também não conseguem carregar o segundo estilo do ".cabecalhoPrincipal-nav". Já tentei mudar o nome da classe, colocar id, colocar o caminho completo ".cabecalhoPrincipal .container .cabecalhoPrincipal-nav", mas nada resolveu. As únicas formas de resolver que encontrei foram: colocar inline na tag do html, ou copiar e colar esse código em outro css. Ou seja, 2 soluções mais bizarras que o erro. Quando abro o devTools do chrome, na aba elements ele não carrega o display flex, mas na aba source o arquivo está com o display flex.

É muito estranho. Alguém já passou por isso? Seria memória do navegador ou da minha máquina? Ou alguma outra configuração de navegador? Alguma pista para ajudar?

5 respostas
por Victor Maestri
| 21.3k xp | 3 posts
Analista desenvolver Front-end

Renato,

Bem provável que o motivo do CSS não estar pegando é por conta de onde o seu elemento HTML está renderizando. Poderia mostrar seu código HTML de exemplo? O meu teste funcionou. Seja:

<div class="cabecalhoPrincipal">
  <div class="container">cabecalhoPrincipal > container</div>
</div>
<br/>
<div class="cabecalhoPrincipal-nav">cabecalhoPrincipal-nav</div>

https://codepen.io/anon/pen/LBjRxB

por Estudante
| 251.6k xp | 136 posts

O HTML é o mesmo da aula:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alurinha | Cursos online</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/flexbox.css">
</head>
<body>

    <header class="cabecalhoPrincipal">
        <div class="container">
            <h1 class="cabecalhoPrincipal-titulo">
                <a href="#">Alurinha</a>
            </h1>

            <nav class="cabecalhoPrincipal-nav">
                <a class="cabecalhoPrincipal-nav-link" href="#">Home</a>
                <a class="cabecalhoPrincipal-nav-link" href="#">Cursos</a>
                <a class="cabecalhoPrincipal-nav-link" href="#">Sobre nós</a>
                <a class="cabecalhoPrincipal-nav-link" href="#">Contato</a>
                <a class="cabecalhoPrincipal-nav-link cabecalhoPrincipal-nav-link-app" href="#">Nosso APP</a>
            </nav>
        </div>

    </header>

    <main class="conteudoPrincipal">
    <!--resto do código-->

Algumas horas ele renderiza e outras não :/ Deve ser problema de memória da máquina :/

solução!
por Victor Maestri
| 21.3k xp | 3 posts
Analista desenvolver Front-end

Boa tarde Renato,

Identifiquei o seu problema. No final da sua classe css .cabecalhoPrincipal .container tem um ; finanlizando a leitura do arquivo, ou seja, o sua classe de css .cabecalhoPrincipal-nav não será lida. Exemplo da forma correta:

.cabecalhoPrincipal .container {
    display: flex;
}

.cabecalhoPrincipal-nav {
    display: flex;
}
por Estudante
| 251.6k xp | 136 posts

Boa tarde Victor!

Funcionou mesmo! Eu achava que era opcional o ";" no final do css, e não fazia diferença colocar ou não.

Marquei sua resposta como solução!

Muito obrigado mesmo pela ajuda! :)

por Victor Maestri
| 21.3k xp | 3 posts
Analista desenvolver Front-end

Disponha. Fico feliz em ter ajudado! :)