Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

fiquei com dúvida em relação a cada filho ?

adicionar flexbox ao pai isso eu entendi, mais só de ter um espaço ele sabe que cada bloco de elemento é um filho ? normalmente tem que haver um tag abertura e uma fechada ou não precisa ? `

<h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
<a class="rodapePrincipal-navMap-link" href="#">Java</a>
<a class="rodapePrincipal-navMap-link" href="#">PHP</a>
<a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
<a class="rodapePrincipal-navMap-link" href="#">Scala</a>
<a class="rodapePrincipal-navMap-link" href="#">Python</a>
<a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
<a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
<a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>

<h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
<a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
<a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
<a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
<a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
<a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
<a class="rodapePrincipal-navMap-link" href="#">Polymer</a>
qui ```
1 resposta
solução!

Olá Leandro tudo bem?

Neste caso ao aplicar o estilo no "pai", que no código seria a tag nav, e referenciou pela classe .rodapePrincipal-navMap-listno CSS, ele classificou como se as tags que estão abaixo dele (h4 e a) fossem seus filhos

O que muda para diferenciar os blocos entre os h4 são as características que a tag h4 tem, que foram aplicadas em cada uma de suas classes .navmap-list-title ou seja tamanho de letra maior, cores, mas em relação à aplicação do flex, todos os filhos estão obedecendo as mudanças

Na aula primeiro o professor deixa eles todos alinhados com a propriedade display: flex e como padrão o CSS aplicou como row(alinhados) todas as tags ficaram uma ao lado da outra.

Depois o professor aplica o estilo em coluna retirando o padrão (row) e aplicando column com o flex-direction: column o que aconteceu foi que ficaram um embaixo do outro,

Desta forma o Professor pode alterar as características de todos a partir da utilização da classe .rodapePrincipal-navMap-list da tag nav

<nav class="rodapePrincipal-navMap-list">

        <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
        <a class="rodapePrincipal-navMap-link" href="#">Java</a>
        <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
        <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
        <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
        <a class="rodapePrincipal-navMap-link" href="#">Python</a>
        <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
        <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
        <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>

        <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
        <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
        <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
        <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
        <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
        <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
        <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>

        <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
        <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
        <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
        <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
        <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
        <a class="rodapePrincipal-navMap-link" href="#">Django</a>
        <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>

        <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
        <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
        <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
        <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>
</nav>

Nesta documentação tem algumas informações sobre o CSS para estilos em cascata:

Espero ter ajudado

Até mais