web-dev-qa-db-fra.com

CSS3 Flex: Tirez l'enfant vers la droite

voici ce que j'ai violon

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>

Je souhaite que le dernier élément de la boîte flexible soit tiré vers la droite ("Paramètres" dans mon violon) tout en conservant tous les autres éléments sont. L'élément "Paramètres" doit également être centré verticalement et tout.

align-self: flex-end pousse l'élément vers le bas (je le veux à droite).

Je préférerais beaucoup une solution utilisant flex-box car mes articles ont des hauteurs variables et doivent toujours être centrés verticalement.

Quel est le moyen le plus propre pour y parvenir?

Merci de votre aide!

htmlcsshtml5css3
73
Macks

Solution simple, utilisez une marge d'ajustement automatique:

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

Vous voudrez peut-être aussi ne pas utiliser width: 100% pour que l’élément reste dans la zone 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/

Voir aussi https://www.w3.org/TR/css-flexbox-1/#auto-margins

183
ndm