时间戳

首页 > 解决方案 > 如何去除 flex 容器中 div 之间的接缝

html - 如何去除 flex 容器中 div 之间的接缝

问题描述

.main {
  height: 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
}

.item {
  flex-grow: 1;
  background-color: #0c0c0c;
}
<div class="main">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

结果图像

您可以看到 div 之间的白色接缝。

该问题仅发生在手机视图中。请复制到您的文本编辑器并通过 chrome 打开并按 F12 切换到手机视图。Stackoverflow 片段不会再次出现问题。

标签： htmlcss

解决方案

我被难住了一分钟，但我相信这是你的答案：

.main {
  height: 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  margin: 0px;
  background-color: #0c0c0c;
}

.item {
  flex-grow: 1;
  background-color: #0c0c0c;
}

我将边距保留为 0px，但这可能会在不影响整体结果的情况下被删除。我认为 div 边框默认为灰色，所以我将其重写为与主 div 相同的颜色。

推荐阅读