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

Display-flex com height

Nesse exercício: https://goo.gl/Jyt8E9 o instrutor inseriu uma height no elemento que recebe o display flex:

image.jpg

Mas, caso eu insira uma tag a mais, o layout quebra, pois foi definida uma altura em px.

image.jpg

Há uma forma de, quando eu adicionar mais um elemento html, a altura se ajuste sem eu precisar alterar o height novamente?

.rodapePrincipal-navMap-list {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    height: 250px;
}
<div class="container">

            <section class="rodapePrincipal-navMap">

                <h3 class="subtitulo">Mapa de cursos</h3>

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

            </section>

        </div>
3 respostas

Olá Roger!

Um outro jeito de fazer isso seria usar o column-count aí você pode atribuir um número de colunas para a sua div e você não precisa definir uma height

abraços!

Olá Philippe.

Para usar o column-count devo inserir 4 divs dentro do nav?

Fiz isso e o resultado foi esse: column-count-div.jpg

Também tentei colocá-lo no nav: column-count-nav.jpg

Fiz um teste colocando 4 divs dentro do nav e defini as larguras delas. Aí coloquei um display block nos links e adicionei mais links dentro da primeira div. Funcionou:

solucao-proposta.jpg

Vc acha que é uma boa solução?

Segue o código abaixo.

.rodapePrincipal-navMap-list {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    /*flex-direction: column;
    flex-wrap: wrap;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    height: 250px;*/
}

.rodapePrincipal-navMap-list div {
    width: 25%;
}

.rodapePrincipal-navMap-link {
    display: block;
}
<nav class="rodapePrincipal-navMap-list">

                    <div>
                        <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>
                        <a class="rodapePrincipal-navMap-link" href="#">Link maluco</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Link maluco 02</a>
                        <a class="rodapePrincipal-navMap-link" href="#">Link maluco 03</a>
                    </div>

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

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

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

                </nav>
solução!

Para usar o column count, todos os elementos que vão estar nas colunas precisam ser filhos de um mesmo pai, aí nesse pai vc coloca o column-count

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software