CSS3 Flex: Ziehen Sie das Kind nach rechts

Hier ist, was ich Geige habe

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>

Ich möchte, dass der letzte Gegenstand in der Flex-Box nach rechts gezogen wird ("Einstellungen" in meiner Geige), während alle anderen Gegenstände so bleiben, wie sie sind. Das "Settings" -Element sollte auch vertikal zentriert sein und alles.

align-self: flex-end schiebt den Gegenstand nach unten (ich möchte ihn rechts).

Ich würde eine Lösung mit Flex-Box sehr bevorzugen, da meine Artikel unterschiedliche Höhen haben und immer vertikal zentriert sein sollten.

Was ist der sauberste Weg, um dies zu erreichen?

Danke für Ihre Hilfe!

Einfache Korrektur, verwenden Sie einen automatisch anpassbaren Rand:

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

Möglicherweise möchten Sie auch nicht verwenden, width: 100%damit das Element im sichtbaren Bereich bleibt:

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/

Siehe auch https://www.w3.org/TR/css-flexbox-1/#auto-margins