CSS Flexboxの右端のコンテナのサイズが適切でないのはなぜですか？

Question

中央のものがページの中央にあり、横のものが固定幅の3つのコンテナを連続して表示しようとした後、私はthe CSS Flexbox modelを参照して、in a Stackoverflow questionと言いました。 display: flex代わりのinline-boxとしてfloat: leftまたはコンテナの表示を使用して

marginをいじりながら、コードの途中少ない線で、非常によく動作しているようです。 #logo、navと#search：私は、行の3個のコンテナを保持するための容器#menubarをしたい

：

はしかし、私は自分で解決するように見えることはできませんフレキシボックスの問題に遭遇しました。

<div id="menubar"> 
    <div id="logo"></div> 
    <nav> 
     <ul> 
      <li><a href="#">Articles</a></li> 
      <li><a href="#">Images</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Disclaimer</a></li> 
     </ul> 
    </nav> 
    <div id="search"></div> 
</div> 

#logo -containerならびに固定サイズのもので-container #search（width: 80px、height: 80px）。 1つは#menubarコンテナの左端に配置し、右端に配置する必要があります。

navコンテナは、#menubarコンテナの中央に配置する必要があります。基本的にポジショニングがを働いていると私は希望のレイアウトを取得：#search -containerが79px width * 80px heightに表示されている間

[#logo left] [nav centered] [#search right] 

しかし、何らかの理由で#logo -containerが80px width * 80px heightの指定した次元で表示されているが、

header div#menubar div#logo { 
    width: 80px; 
    height: 80px; 
    background-color: orange; 
} 

header div#menubar div#search { 
    width: 80px; 
    height: 80px; 
    background-color: orange; 
} 

確認する私は、Photoshopでスクリーンショットを作成して拡大表示し、その寸法を表示するためにコンテナを選択します。

#search -containerの幅が1個のピクセルが欠落している理由を私は理解することはできません。

ここには、私が使用しているHTMLとCSSのJSFiddleがあります。

• 私はフレックスボックスを正しく使用していますか？
• 両方のサイドコンテナのサイズが80x80ピクセルになるように修正するにはどうすればよいですか？

Answer 1

私はflexboxを正しく使用していますか？

はいなし

代わりのwidthあなたは、理想的には、flex-grow、flex-shrinkとflex-basisを組み合わせflex速記プロパティを使用する必要があります。

header div#menubar div#logo { 
    flex: 0 0 80px; 
    height: 80px; 
    background-color: orange; 
} 

代わりに、要素はあなたが正しい結果を得るwidthし、その後0

* { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
body { 
 
    background-color: #dfe3e5; 
 
} 
 
header div#top { 
 
    height: 22px; 
 
    /*background-image: url('../img/colorbar.png'); 
 
    background-position: top left; 
 
    background-repeat: repeat-x;*/ 
 
    background-color: gray; 
 
} 
 
header div#menubar { 
 
    background-color: #1c2227; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
header div#menubar div#logo { 
 
    flex: 0 0 80px; 
 
    height: 80px; 
 
    background-color: orange; 
 
} 
 
header div#menubar nav { 
 
    display: table; 
 
    text-align: center; 
 
    background-color: darkred; 
 
} 
 
header div#menubar nav ul li { 
 
    display: inline-block; 
 
    margin-left: -4px; 
 
    list-style-type: none; 
 
    line-height: 80px; 
 
    text-align: center; 
 
} 
 
header div#menubar nav ul li a { 
 
    outline: 0; 
 
    display: block; 
 
    text-transform: uppercase; 
 
    padding: 0px 20px; 
 
    font-size: 1.1em; 
 
    font-family: 'Raleway', "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    color: #eee; 
 
    text-decoration: none; 
 
} 
 
header div#menubar nav ul li a:hover { 
 
    color: #000; 
 
    background-color: orange; 
 
} 
 
header div#menubar div#search { 
 
    flex: 0 0 80%; 
 
    height: 80px; 
 
    background-color: orange; 
 
}

<header> 
 
    <div id="menubar"> 
 
    <div id="logo"></div> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">Articles</a> 
 
     </li> 
 
     <li><a href="#">Images</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Disclaimer</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    <div id="search"></div> 
 
    </div> 
 
</header>

のflex-shrink値を使用して収縮しないようにすることができます