適応幅とFlex-成長

Question

を私はフレキシボックスでこれをしようとしているが、私は間違っているかを把握することはできません following template

とメニューバーを設定しようとしています。ここではHTMLです：

<nav> 
<ul> 
      <li id="navleft"> 
       <img src="images/logo.png" alt="logo wikihow"> 
      </li> 

      <li class="navothers"> 
       <img src="images/contribuye.png" alt="contribuye"> 
       <p>CONTRIBUYE</p> 
      </li> 
      <li class="navothers"> 
       <img src="images/explora.png" alt="explora"> 
       <p>EXPLORA</p> 
      </li> 
      <li class="navothers"> 
       <img src="images/entrar.png" alt="entrar"> 
       <p>ENTRAR</p> 
      </li> 
      <li class="navothers"><img src="images/mensajes.png" alt="mensajes"> 
       <p>MENSAJES</p> 
      </li> 
</ul> 
</nav> 

そして、私はCSSで次のスタイルを適用します。

nav { 
    padding: 0 30% 0 30%; 
} 

nav ul { 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    background-color: #93B874; 
} 

#navleft{ 
    flex-grow:32; 
    flex-shrink:1; 
} 

#navleft img{ 
    width: 144px; 
    vertical-align:center 
} 

.navothers{ 
    flex-grow:1; 
    flex-shrink:4; 
} 

私は following result

私の問題は、右の部分内のすべての要素（「持つことになってしまいますnavothers "クラス）は同じ幅を持たない！彼らはちょうど彼らが持っているテキストのサイズに応じて適応します。

私は多くのものを混ぜているかもしれませんが、どうしたのですか？

Answer 1

＃navleftのフレックス増加値が大きすぎ、コンテナが小さすぎます。あなたの商品は成長できず、十分な部屋がありません。これを試してみてください：

CSS：

nav { 
    padding: 0 10% 0 10%; // imho it's a strange way to center your nav. Reduced to show you that you're lacking room. 
} 

nav ul { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: #93B874; 
} 

#navleft { 
    flex: 2; // You may tune this one but keep room for your other items ! 
} 

#navleft img { 
    width: 144px; 
    vertical-align: center 
} 

.navothers { 
    flex: 1; 
    border: solid 1px #000; 
} 

HTML：洞察力のための

<nav> 
    <ul> 
     <li id="navleft"> 
      <img src="images/logo.png" alt="logo wikihow"> 
     </li> 

     <li class="navothers"> 
      <img src="images/contribuye.png" alt="contribuye"> 
      <p>CONTRIBUYE</p> 
     </li> 
     <li class="navothers"> 
      <img src="images/explora.png" alt="explora"> 
      <p>EXPLORA</p> 
     </li> 
     <li class="navothers"> 
      <img src="images/entrar.png" alt="entrar"> 
      <p>ENTRAR</p> 
     </li> 
     <li class="navothers"> 
      <img src="images/mensajes.png" alt="mensajes"> 
      <p>MENSAJES</p> 
     </li> 
    </ul> 
</nav> 

https://jsfiddle.net/me7t2hv3/