在尝试连续显示三个容器(中间一个在页面居中而侧面的宽度固定)时遇到问题后,我遇到了 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 像素?
最佳答案
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>
然后你得到正确的结果
关于html - 为什么 CSS Flexbox 不能正确调整最右边容器的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39147948/