html - 为什么 CSS Flexbox 不能正确调整最右边容器的大小？

Question

在尝试连续显示三个容器(中间一个在页面居中而侧面的宽度固定)时遇到问题后，我遇到了 the CSS Flexbox model , 提到 in a Stackoverflow question .

使用 display: flex 而不是 float: left 或将容器显示为 inline-box 同时弄乱 margin 似乎工作得很好，代码行更少。

但是，我遇到了一个关于 flexbox 的问题，我自己似乎无法解决:

我想要一个容器 #menubar 来容纳三个连续的容器:#logo、nav 和 #search.

<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 容器和#search 容器都是固定大小的(width: 80px, 高度:80px)。一个应该放在 #menubar 容器的最左边，一个应该放在最右边。

nav-容器应该位于#menubar-容器的中间。基本上定位正在工作，我得到了所需的布局:

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

但是，由于某些原因，#logo-container 显示在 80px width * 80px height 的指定尺寸处，而 #search-容器显示在 79px 宽度 * 80px 高度，即使通过 CSS 看起来也是这样:

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 的宽度少了一个像素。

这是一个JSFiddle使用我正在使用的 HTML 和 CSS。

• 我是否正确使用了 flexbox？
• 如何修复它，使两个边容器的尺寸均为 80x80 像素？

Answer 1

Am I using flexbox correctly?

是与否

理想情况下，您应该使用 flex 简写属性，flex-grow、flex-shrink，而不是 width 和 flex-basis。

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

或者，您可以通过使用 width 和 flex-shrink 值为 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>

然后你得到正确的结果