Question

我有一个包含三个项目的行（容器），我希望它们之间水平显示，并且行间的左侧或右侧没有空格。我正在使用带有对齐内容的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。

感谢。

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设置为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>

CSS：中间有空格的Flexbox无法正常工作（不再）

1 个答案: