Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

separación entre columnas Flexbox

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Footer y controlando mejor los elementos y actividad Arreglando el mapa de cursos

por Héctor Luis Hernández Gallego
| 86.7k xp | 4 posts

Estoy siguiendo el video a detalle, pero al momento de posicionar las columnas como en el video no quedan separadas entre si mientras que en el video si..

como queda en el video.. ![](Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad )

les comparto el código html y Css... `

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

        <h4 class="navmap-list-title navmap-list-title-backend">Lenguajes 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>


        <h4 class="navmap-list-title navmap-list-title-frontend">Lenguajes Frontend</h4>
        <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
        <a class="rodapePrincipal-navMap-link" href="#">Desarrollo 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 datos</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>`
.rodapePrincipal-navMap-list{


    display: flex;
    flex-direction: column;
    height: 250px;
    flex-wrap: wrap ;

}
2 respuestas
por Yohan Manuel Estévez Rueda
| 62.8k xp | 8 posts
Coordinador de Personal de Seguridad Penitenciaria

Hola Hector,

Seguro es por el ancho de la pantalla que queda cuando le das inspeccionar, prueba quitando las herramientas de desarrollados o reduciendo su anchura, o configurarla para que se vea en la parte inferior de tu pantalla, para verificar si se comporta de la misma manera. Pero con el código css suministrado debería quedar como en el video.

por Federico José Pitton
| 70.4k xp | 1 posts

Hola, tenia el mismo problema y lo solucione dándole esta propiedad al contenedor padre

.rodapePrincipal-navMap  {
    width: 100%;
}

También aumente 5px de separación en el height porque no me cubría del todo la altura de la columna

.rodapePrincipal-navMap-list {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    height: 255px;
    flex-wrap: wrap;

}