gauche, au centre et à droite aligner les éléments avec largeur flex et différents

Question

JSFiddle

Le point est de faire ul gauche avec align max-width gauche, bloc central sans largeur spécifiée être toujours centrée (contenu de cette ul peut varier) et à droite ul être toujours flotté à droite avec max-width dans ma barre de navigation supérieure. Le problème principal est que lorsque je spécifie des largeurs pour les propriétés flex de ul, cela ne fonctionne pas comme prévu: le 3ème ul doit être aligné à droite tandis que le 2nd doit prendre autant d'espace que possible dans une ligne. C'est correct avec l'alignement mais le 3ème ul prend trop d'espace (plus que nécessaire) et visuellement n'est pas flotté à droite. Si vous spécifiez sa largeur pour résoudre ce problème, l'alignement de 2nd ul ne fonctionnera pas. Tous les éléments ont une largeur différente, pour autant que je sache que Flex ne peut gérer que des éléments de même largeur.

Cependant, je suppose que c'est un bon comportement pour flex.

HTML

<nav class="nav_wrapper" role="navigation"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li data-item-id="nav-profile-menu"> 
      <a id="menu_toggle"><i class="fa fa-bars"></i></a> 
     </li> 
    </ul> 
    <ul class="nav navbar-nav navbar-center"> 
     <li data-item-id="nav-profile-menu"> 
      <a class="summary" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="usd"> 
       <span class="summary-item">USD</span> 
       <span> 
        <i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i> 
        99&nbsp;<span class="small-text hidden-sm hidden-xs">-0,0474</span> 
       </span> 
      </a> 
     </li> 
     <li data-item-id="nav-profile-menu"> 
      <a class="summary"> 
       <span class="summary-item">Brent</span>&nbsp; 
       <span> 
        <i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i> 
        99&nbsp;<span class="small-text hidden-sm hidden-xs">-0,86%</span> 
       </span> 
      </a> 
     </li> 
     <li data-item-id="nav-profile-menu" class="hidden-xs"> 
      <a class="summary"> 
       <span class="summary-item">Ni</span>&nbsp; 
       <span> 
        <i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i> 
        105,00&nbsp;<span class="small-text hidden-sm hidden-xs">1,29%</span> 
       </span> 
      </a> 
     </li> 
     <li data-item-id="nav-profile-menu" class="hidden-xs"> 
      <a class="summary"> 
       <span class="summary-item">Al</span>&nbsp; 
       <span> 
        <i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i> 
        2131,50&nbsp;<span class="small-text hidden-sm hidden-xs">0,35%</span> 
       </span> 
      </a> 
     </li> 
    </ul> 
    <ul class="nav navbar-nav navbar-auth"> 
     <li data-item-id="nav-profile-menu"> 
      <a href="/auth" data-toggle="modal" data-target="#login" id="reg-in" class="inline-block">       <span>reg</span>&nbsp;<i class="fa fa-user-plus"></i></a><span></span> 
     </li> 
     <li data-item-id="nav-profile-menu" data-toggle="tooltip" title="" data-placement="bottom"> 
      <a href="/auth" data-toggle="modal" id="sign-in" data-target="#login" class="inline-block">       <span>auth</span>&nbsp;<i class="fa fa-sign-in"></i></a> 
     </li> 
    </ul></nav> 

Answer 1

pourquoi vous ne l'utilisez pas flex + absolu et u utiliser flotteur? Beaucoup plus propre et pas besoin de clear after floats.

.nav_wrapper { 
    position: relative; 
    display: flex; 
    justify-content: center; 
} 

.navbar-left { 
    position: absolute; 
    left: 0; 
} 

.navbar-auth { 
    position: absolute; 
    right: 0; 
} 

et vous pouvez supprimer la largeur de ul