CSS3 Flex: Pull dziecko w prawo

Question

oto co mam 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>

Chcę ostatnia pozycja wewnątrz flex-box do zabrania na prawo ("Ustawienia "w moim skrzypcach), zachowując wszystkie pozostałe elementy w taki sposób, w jaki są. "Ustawienia" - powinny być również wyśrodkowane w pionie i wszystko.

align-self: flex-end przesuwa element na dół (chcę go z prawej strony).

Bardzo bym preferował rozwiązanie wykorzystujące flex-box, ponieważ moje produkty mają zmienne wysokości i powinny być zawsze wyśrodkowane w pionie.

Jaki jest najczystszy sposób, aby to osiągnąć?

Dzięki za pomoc!

Answer 1

Proste fix, należy użyć automatycznego ustawiania marginesu:

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

Można też, aby nie używać width: 100% tak, że element pozostaje wewnątrz obszaru widzialnego:

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/

Zobacz także http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins