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.