CSS3 Flex: tire del niño hacia la derecha

91

esto es lo que tengo 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>
Expandir fragmento

Quiero que el último elemento dentro de la caja flexible se mueva hacia la derecha ("Configuración" en mi violín) mientras se mantienen todos los demás elementos como están. El elemento "Configuración" también debe estar centrado verticalmente y todo.

align-self: flex-end empuja el elemento hacia abajo (lo quiero a la derecha).

Preferiría mucho una solución con flex-box porque mis artículos tienen alturas variables y siempre deben estar centrados verticalmente.

¿Cuál es la forma más limpia de lograrlo?

¡Gracias por tu ayuda!

html css Macks
fuente

Respuestas:

218

Solución simple, use un margen de ajuste automático:

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

Es posible que también desee no usar width: 100%para que el elemento permanezca dentro del área 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/

Consulte también https://www.w3.org/TR/css-flexbox-1/#auto-margins

ndm
fuente