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

Mesmo com flex-wrap não quebra a linha

Referente ao curso Flexbox: posicione elementos na tela

por Rafael Pereira Rodrigues
| 27.7k xp | 7 posts
Estagiário

Mesmo com o flex-wrap o conteúdo do site estoura o container e continua na vertical

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

9 respostas
por Mateus Henrique
| 986.8k xp | 1546 posts
Instrutor Desenvolvedor

Fala Rafael, tudo bem? Espero que sim!

Como está o seu código? Poderia mandar pra gente o HTML e CSS completos por favor?

Aguardo o retorno!

por Rafael Pereira Rodrigues
| 27.7k xp | 7 posts
Estagiário

como eu compartilho o código completo por aqui?

por Mateus Henrique
| 986.8k xp | 1546 posts
Instrutor Desenvolvedor

Rafael, você pode utilizar as crases, colocando três crases antes e três crases após o código, assim:

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

Resultado:

Seu código aqui
por Rafael Pereira Rodrigues
| 27.7k xp | 7 posts
Estagiário

HTML '''

Nossos cursos

        <nav>
            <ul class="conteudoPrincipal-cursos">
                <li class="conteudoPrincipal-cursos-link"><a href="#">Java</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">PHP</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Ruby on Rails</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">.NET</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Pascal</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Flexbox</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Desenvolvimento Web</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Java Web</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Javascript</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">AngularJS</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">TDD com C</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Redes de computadores</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">MySQL</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">MariaDB</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Postegres</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
            </ul>
        </nav>
    </div>
''' 

CSS

'''
.conteudoPrincipal-cursos {
display: flex;
flex-flow: column wrap;
height: 250px;

}

.rodapePrincipal-navMap-list { display: flex; flex-flow: column wrap; height: 250px;

}

.conteudoPrincipal-cursos { display: flex; flex-wrap: wrap; justify-content: flex-start; }

.conteudoPrincipal-cursos-link { width: 23%; margin-bottom: 1%; } '''

por Mateus Henrique
| 986.8k xp | 1546 posts
Instrutor Desenvolvedor

Ainda não consegui encontrar o erro...

Poderia enviar o projeto completo compactado?

Assim consigo ver todo o código e testar aqui na minha maquina!

Você pode compactar enviar para google drive (lembre de liberar o acesso ao link para publico)

Aguardo o retorno!

por Eduardo Marçal Clemente
| 98.7k xp | 12 posts

Testei aqui trocando flex-flow por flex-wrap:wrap e deu certo aqui pelo menos esta quebrando a p

por Rafael Pereira Rodrigues
| 27.7k xp | 7 posts
Estagiário

Vou enviar pelo drive.

https://drive.google.com/drive/folders/1RBXz8FfmeMAkWRPj8-eiF__8N8r-lFka?usp=sharing

solução!
por Mateus Henrique
| 986.8k xp | 1546 posts
Instrutor Desenvolvedor

Opa Rafael, desculpe pela demora para resposta!

Você pode resolver o problema removendo o height:250px ; da classe .conteudoPrincipal-cursos e nessa mesma classe, como o Eduardo disse logo acima, alterar o flex-flow: column wrap; para flex-wrap: wrap;, assim ficando o código:

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
}

Espero ter ajudado, abraços e bons estudos :D

por Rafael Pereira Rodrigues
| 27.7k xp | 7 posts
Estagiário

Obrigado, Mateus !!