CSS3 Flex: Pull child to the right

Question

here's what I have 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>

I want the last item inside the flex-box to be pulled to the right ("Settings" in my fiddle) while keeping all other items the way they are. The "Settings"-item should also be centered vertically and everything.

align-self: flex-end pushes the item to the bottom (I want it on the right).

I would very much prefer a solution using flex-box because my items have variable heights and should always be centered vertically.

What is the cleanest way to achieve this?

Thanks for your help!

Answer 1

Simple fix, use an auto-adjusting margin:

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

You may also want to not use width: 100% so that the element stays inside the visible area:

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/

See also https://www.w3.org/TR/css-flexbox-1/#auto-margins