CSS3 Flex: Déplacer l'enfant vers la droite

Question

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;
}

  Home
  Menu
  More
  Stuff
  Settings

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

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

J'aimerais beaucoup une solution utilisant flex-box car mes éléments ont des hauteurs variables et doivent toujours être centrés verticalement.

Quel est le moyen le plus propre pour y parvenir ?

Merci pour votre aide !

Answer 1

Correction simple, utilisez une marge auto-ajustable :

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

Vous voudrez peut-être aussi ne pas utiliser width: 100% afin 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