html - CSS:带有空格的 Flexbox 无法正常工作(不再)

Question

我有一行(容器)包含三个元素，我想水平显示它们之间的间距相等(并且行的左侧或右侧没有空格)。我正在使用带有 justify-content:space-between 的 flexbox。

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

这曾经工作得很好，直到我做了一些(据我所知)完全不相关的重构，没有对 CSS 进行任何更改。然后突然这三个元素不再覆盖整个包含行。相反，行的右侧有一个空格(即行中最右边的元素的右侧)。

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

还有另一个屏幕打印，您可以看到容器行的宽度也是 1280 像素(它应该是 - 与横幅宽度相同)，以及所有相关的 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 仍然错误地呈现了页面......换句话说，Inspector 工具显示的 CSS 与Firefox 实际使用的 CSS。

谢谢。

Answer 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 定义:

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.

更新:

这个解决方案也许可行:

在你的 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>