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

在尝试将三个容器显示成一行时遇到了问题，中间的一个容器位于页面的中心，而侧面的容器具有固定的宽度，我提到

使用

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>

但是，由于某种原因，

#徽标

-容器以指定的尺寸显示，即

80px宽度*80px高度

，而

#搜索

-容器以

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

-容器缺少一个像素的宽度

下面是我正在使用的HTML和CSS的示例

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

我是否正确使用flexbox

是和否

理想情况下，您不应该使用

width

而应该使用

flex

速记属性组合、

flex-grow

、

flex-shorn

和

flex-basis

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

或者，您可以使用

width

和

flex-shrink

值0来确保元素不会收缩

*{
保证金：0；
填充：0
}
身体{
背景色：#dfe3e5；
}
收割台分区#顶部{
高度：22px；
/*背景图像：url（'../img/colorbar.png'）；
背景位置：左上角；
背景重复：重复-x*/
背景颜色：灰色；
}
标题div#菜单栏{
背景色：#1c2227；
显示器：flex；
证明内容：之间的空间；
}
标题分区#菜单栏分区#徽标{
flex:080px；
高度：80px；
背景颜色：橙色；
}
收割台分区#菜单栏导航{
显示：表格；
文本对齐：居中；
背景色：暗色；
}
收割台div#menubar nav ul li{
显示：内联块；
左边距：-4px；
列表样式类型：无；
线高：80px；
文本对齐：居中；
}
收割台div#menubar nav ul li a{
大纲：0；
显示：块；
文本转换：大写；
填充：0px 20px；
字体大小：1.1米；
字体系列：“Raleway”，“Trebuchet MS”，Arial，Helvetica，无衬线；
颜色：#eee；
文字装饰：无；
}
收割台div#菜单栏导航ul li a：悬停{
颜色：#000；
背景颜色：橙色；
}
标题分区#菜单栏分区#搜索{
弹性：0.80%；
高度：80px；
背景颜色：橙色；
}

向

#徽标

和

#搜索

添加

弹性收缩：0

。请参阅此处的

flex-shrink

因素部分：我刚刚尝试添加

flex-shrink:0

，在Mozilla Firefox中查看页面时，仍然显示

#search

容器的宽度为79px:，Edge和IE11。我认为屏幕分辨率不是问题。我无法重现这个问题。到处都是80x80。很高兴你找到了解决方案。在我第一篇评论中提到的链接中，它讨论了使用

flex:080px

的优势。干杯感谢您提供的信息，我同意您使用

flex:080px

的主要建议。现在看起来很好！

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