Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida sobre a propriedade display: flex

Olá! Quando definimos um elemento pai como flex, seus filhos herdam esta característica? Por favor, por que tivemos que repetir essa propriedade, conforme o código abaixo?

HTML:

    <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>

CSS:

.cabecalhoPrincipal .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cabecalhoPrincipal-nav{
    display: flex;
}

Eu achava que os elementos do nav já iam ficar alinhados um do lado do outro quando definimos no elementos pai, mas ai precisamos definir display: flex também no nav. Ou conclui errado? kkk

thanks!

2 respostas
solução!

Fala Larissa, tudo bom? O elemento nav, assim como section, article, section e div não tem formatação, a não ser ser elementos em bloco (display: block;)

Uma das características do display: flex; é distribuir os elementos elementos um do lado do outro por padrão (se não for ajustado esse comportamento). Você notará que tags <a> já ficam uma no lado da outra, o que pode parecer não necessitar do flex, afinal âncoras são elementos inline, que fazem isso de ficar lado a lado, como acontece no caso do <span>, <i>, <b>, <em>, <strong>. Mas se realizar um teste notará que o espaço entre um link e outro também desaparece ao adicionar o valor flex a propriedade display. Isso porque o flex faz o que eu disse acima, distrubuir os elementos dentro daquele pai, ignorando os espaços. E talvez se pergunte... que espaço e essa é fácil:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Note que utiliza-se espaço de identação, entre um link e outro, o html junta espaços sequenciais em um espaço apenas, mas ainda sim é um espaço e por isso ao colocar um link ao lado do outro eles não grudam, eles ficam com um espaço entre eles. Já ao aplicar flex esse espaço é desconsiderado.

Sua pergunta é se os filhos herdam o flex. Não, não herdam o que ocorre apenas é que os filhos de um elemento flex mudam seu comportamento distribuindo e organizando-se conforme as propriedades existentes de flex forem definidas em seu elemento pai e as vezes nos filhos como é o caso de align-self que alinha apenas um dos filhos de forma diferente do que o setado no elemento pai.

Provavelmente o professor adicionou flex ao link, pois depois usará este mesmo flex para alinhar os links ao centro um dos outros, o que é mais prático fazer se utilizar flex.

Caso tenha resolvido/entendido marque como Resolvido para que a resposta possa ajudar outras pessoas com o mesmo problema.