CSS:中间有空格的Flexbox无法正常工作(不再)

时间:2016-12-23 08:12:37

标签: html css flexbox

我有一个包含三个项目的行(容器),我希望它们之间水平显示,并且行间的左侧或右侧没有空格。我正在使用带有对齐内容的flexbox:space-between。

这是在Firefox(最新版本)和Internet Explorer中;我没有测试过的其他浏览器。

这曾经很好用,直到我做了一些(据我所见)完全不相关的重新分解,没有改变CSS。然后突然这三个项目不再覆盖整个包含行。相反,行右侧有一个空格(即行中最右边项目的右侧)。

另见下面的屏幕打印。在横幅下方,您会看到三个项目(正方形,实际上是列表元素,容器行是无序列表)。而且你看到右边有空间。我想要的只是项目行显示与横幅相同的全宽,即1280px,正如您在Firefox检查器工具中看到的那样。您还可以在屏幕上看到相关的HTML:

enter image description here

另一个屏幕打印,你看到容器行的宽度也是1280px(应该是 - 与横幅相同的宽度),以及所有相关的HTML和CSS:

enter image description here

为了完整起见,这里是对行(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。

感谢。

1 个答案:

答案 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>