Bonjour/Bonsoir,

Pour une menu navigation, je cherche à mettre une icône de recherche à l'extrême droite (comme on pourrait le faire avec flex-end)

Le problème est que dans ce cas, l'ensemble (dont le logo et les menus qui doivent rester à gauche) se tapent aussi en flex-end.

Bref, c'est sûrement con, et j'utilise peut-être pas la bonne méthode (grid, float, position ?) ou j'oublie bêtement un truc.

(Veuillez excuser le novice que je suis  )

Donc: dans le lien codepen, c'est la div "recherche" qui doit rester à hauteur des menus et se taper toute seule à droite

D'ores et déjà merci pour votre aide !

RDV sur codepen : https://codepen.io/Moquette/pen/QmbpzM

Salut,

En mettant margin-left: auto; sur l'élément.

Par contre, ton code d'exemple sur codepen comporte une erreur, la div flex n'est pas fermée. Et pense à indenter correctement ton code, c'est un prérequis pour éviter ce genre d'erreurs… Si tu fais ça sur quelques lignes, je n'ose pas imaginer à l'échelle d'un site !

<header class="header">   
  <div class="logo">logo</div>
  
  <nav class="menu"> 
    <a href="#">boutique</a>
    <a href="#">blog</a>
    <a href="#">team</a>
    <a href="#">vidéos</a>
    <a href="#">notre histoire</a>
    <a href="#">sale</a>
  </nav>
  
  <div class="recherche">
    Recherche
  </div>
</header>

.header {
  display: flex;
  background-color: tomato;
  padding: 10px 5px;
}

.menu {
  padding: 0 5px 0 20px;
}

.menu a {
  display: inline-block;
}

.recherche{
  font-weight: 900;
  margin-left: auto;
}

-
Edité par EmmanuelBeziat 11 mars 2018 à 19:14:41