CSS3 Flex: Çocuğu sağa çekin

işte bende Fiddle var

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>

Flex-box'ın içindeki son öğenin diğer tüm öğeleri olduğu gibi tutarken sağa çekilmesini (kemanımdaki "Ayarlar") istiyorum. "Ayarlar" öğesi de dikey olarak ortalanmalıdır.

align-self: flex-end öğeyi alta iter (sağda olmasını istiyorum).

Flex-box kullanan bir çözümü çok tercih ederim çünkü eşyalarım değişken yüksekliklere sahip ve her zaman dikey olarak ortalanmalı.

Bunu başarmanın en temiz yolu nedir?

Yardımınız için teşekkürler!

Basit düzeltme, otomatik ayarlanan bir kenar boşluğu kullanın:

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

width: 100%Öğenin görünen alan içinde kalması için de kullanmak istemeyebilirsiniz :

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/

Ayrıca bkz. Https://www.w3.org/TR/css-flexbox-1/#auto-margins