CSS3 Flex: tirer l'enfant vers la droite

Question 1

voici ce que j'ai 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>

Développer l'extrait

Je veux que le dernier élément à l'intérieur de la boîte flexible soit tiré vers la droite ("Paramètres" dans mon violon) tout en gardant tous les autres éléments tels qu'ils sont. L'élément "Paramètres" doit également être centré verticalement et tout.

align-self: flex-end pousse l'élément vers le bas (je le veux à droite).

Je préférerais de beaucoup une solution utilisant flex-box car mes articles ont des hauteurs variables et doivent toujours être centrés verticalement.

Quelle est la manière la plus propre d'y parvenir?

Merci de votre aide!

Question 2

Solution simple, utilisez une marge à ajustement automatique:

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

Vous pouvez également ne pas utiliser width: 100%pour que l'élément reste à l'intérieur de la zone 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/

Voir aussi https://www.w3.org/TR/css-flexbox-1/#auto-margins

Answer 1