我有一个包含三个项目的行(容器),我希望它们之间水平显示,并且行间的左侧或右侧没有空格。我正在使用带有对齐内容的flexbox:space-between。
这是在Firefox(最新版本)和Internet Explorer中;我没有测试过的其他浏览器。
这曾经很好用,直到我做了一些(据我所见)完全不相关的重新分解,没有改变CSS。然后突然这三个项目不再覆盖整个包含行。相反,行右侧有一个空格(即行中最右边项目的右侧)。
另见下面的屏幕打印。在横幅下方,您会看到三个项目(正方形,实际上是列表元素,容器行是无序列表)。而且你看到右边有空间。我想要的只是项目行显示与横幅相同的全宽,即1280px,正如您在Firefox检查器工具中看到的那样。您还可以在屏幕上看到相关的HTML:
另一个屏幕打印,你看到容器行的宽度也是1280px(应该是 - 与横幅相同的宽度),以及所有相关的HTML和CSS:
为了完整起见,这里是对行(flex容器,即无序列表)和项目本身的CSS的复制/粘贴:
.flex-container {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
wrap: nowrap; // Nothing changes if I remove this property, it's in fact the default
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.flex-item {
background: #452F5D;
width: 410px;
margin: 0px;
padding: 0px;
height: 100%;
color: white;
font-weight: bold;
font-size: 3em;
}
编辑:正如您在上面的屏幕打印中看到的那样,这些项目也是名为“rechthoek”的CSS类的成员。但是这个类实际上目前没有任何CSS属性,因此可以忽略它。
稍后编辑:猜猜是什么......我突然意识到清除我的浏览器缓存可能是一个好主意...是的,然后它突然再次正常工作(即使没有flex-grow)。所以这对我来说太傻了。
但另一方面,它确实提出了一个更基本的问题:Firefox检测工具如何显示正确的(即当前的)HTML和CSS,并且Firefox仍然错误地呈现(即根据早期版本) )?好吧,至少如果我们假设工具中显示的HTML和CSS,以及我上面的屏幕上打印,确实是正确的(我将尝试再次检查)。
如果是这样,那么我们有一个奇怪的例子,Firefox Inspector工具显示正确的CSS和HTML,但Firefox仍然错误地呈现页面...换句话说,检查工具显示的CSS与Firefox实际使用的CSS。
感谢。
答案 0 :(得分:1)
如果您的Flex容器是针对未对齐的三个元素,则需要另一种解决方案,可能更优雅
这里有一些删除:
.flex-container {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
野兔可能是这样的:
.flex-item {
flex-grow:1;
background: #452F5D;
margin: 0px;
padding: 0px;
height: 100%;
color: white;
font-weight: bold;
font-size: 3em;
}
根据1的灵活增长定义:
如果所有项目的flex-grow设置为1,则剩余空间为 容器将平均分配给所有儿童。
更新:
这个解决方案也许可行:
在 flex-item 类中添加width:410px
,以及
添加中间css类:
middle{
margin-left:10px !important;/**or your value*/
margin-right:10px !important;
}
和你的html类似:
<div class="flex-container">
<div class="flex-item">lol</div>
<div class="flex-item middle">lol</div>
<div class="flex-item">lol</div>
</div>