CSS3 Flex: tira del niño hacia la derecha

esto es lo que tengo Fiddle

ul { display: flex; justify-content: flex-start; flex-direction: row; align-items: center; width: 100%; height: 100px; background: #333; padding: 15px; } ul li { padding: 15px; margin: 5px; background: #efefef; border: 1px solid #ccc; display: inline-block; list-style: none; } #item-1 { height: 50px; } #item-2 { height: 70px; } 
 
  • Home
  • Menu
  • More
  • Stuff
  • Settings

Quiero que el último elemento dentro de la caja flexible se desplace hacia la derecha (“Configuración” en mi violín) mientras mantiene todos los demás elementos como están. El elemento “Configuración” también debe centrarse verticalmente y todo.

align-self: flex-end empuja el elemento hacia abajo (lo quiero a la derecha).

Preferiría mucho una solución que use flex-box porque mis artículos tienen alturas variables y siempre deben estar centrados verticalmente.

¿Cuál es la forma más limpia de lograr esto?

¡Gracias por tu ayuda!

Solución simple, use un margen de ajuste automático:

 ul li:last-child { margin-left: auto; } 

También es posible que no desee usar el width: 100% para que el elemento permanezca dentro del área visible:

 ul { display: flex; justify-content: flex-start; flex-direction: row; align-items: center; /* width: 100%; */ height: 100px; background: #333; padding: 15px; } 

http://jsfiddle.net/dwLHE/

Ver también https://www.w3.org/TR/css-flexbox-1/#auto-margins