0

Buenas tengo el siguiente código, un simple menú sencillo junto con estos estilos usando FlexBox

    <style>
        *{
            padding: 0;
            box-sizing: border-box;
            margin: 0;
        }
        nav{
            background-color: rgb(19, 19, 19);
        }
        nav ul{
            display: flex;
            list-style: none;
            justify-content: flex-start;
            margin-left: 50px;
            

        }
        nav ul li a{
            color: white;
            font-size: 18px;
            text-decoration: none;

        }
        nav ul li{
            background-color: chocolate;
            display: flex;
            padding: 10px;
            height: 50px;
            align-items: center;
        }
        nav ul li:hover{
            background-color: pink;
        }
        .especial{
          
        }
    </style>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="">Inicio</a></li>
                <li><a href="">Novedades</a></li>
                <li><a href="">Contacto</a></li>
                <li class="especial"><a  href="">Acerca</a></li> 
                
               
               
            </ul>
        </nav>
    </header>
    
</body>

Lo que quiero es,usando flexbox y sin usar floats, coger el 4º elemento li -Acerca- que tiene la clase especial (está en blanco en la hoja de estilos lo sé), y mover SÓLO ese elemento li al final del navbar,es decir, los 3 primeros enlaces al principio, y el 4º al final, he probado justify-content: flex end haciéndole un display flex a la clase especial y nada, he probado align-self:flex end a la clase especial y tampoco, y llevo un rato dándole vueltas y no sé lograrlo, imagino que debe ser posible sin necesidad de floats. Un saludo.

1 respuesta 1

1

para eso sólo tenes que usar la propiedad margin-left con el valor auto. El porqué esta mejor explicado acá Uso de márgenes automáticos para la alineación del eje principal de lo que yo lo podría explicar.

En tu caso el css del elemento <li class="especial"> quedaría así:

.especial {
    margin-left: auto;
}
1
  • Dios Santo, muchas gracias, duda resuelta, le daré el vistazo a lo que me has pasado porque realmente no entiendo por qué hace eso. Commented el 2 mar. 2021 a las 1:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.