CSS3 Flex: tire 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;
}

<ul>
  <li id="item-1">Home</li>
  <li id="item-2">Menu</li>
  <li>More</li>
  <li>Stuff</li>
  <li>Settings</li>
</ul>

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

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

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

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

¡Gracias por tu ayuda!

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

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

Es posible que también desee no usar 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/

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