CSS3 Flex: Kéo con sang phải

đây là những gì tôi có 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>

Tôi muốn mục cuối cùng bên trong hộp linh hoạt được kéo sang bên phải ("Cài đặt" trong trò chơi của tôi) trong khi vẫn giữ nguyên tất cả các mục khác. "Cài đặt" -item cũng phải được căn giữa theo chiều dọc và mọi thứ.

align-self: flex-end đẩy mục xuống dưới cùng (tôi muốn nó ở bên phải).

Tôi rất thích giải pháp sử dụng flex-box vì các mục của tôi có chiều cao thay đổi và phải luôn được căn giữa theo chiều dọc.

Cách sạch nhất để đạt được điều này là gì?

Cảm ơn bạn đã giúp đỡ!

Khắc phục đơn giản, sử dụng lề tự động điều chỉnh:

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

Bạn cũng có thể không muốn sử dụng width: 100%để phần tử nằm trong vùng hiển thị:

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/

Xem thêm https://www.w3.org/TR/css-flexbox-1/#auto-margins