无法使用 justify-content: space-between 在两个 div 之间创建空间

Question

为了让 justify-content: space-between 在两个 div（位于另一个 div 内）之间工作，我已经绞尽脑汁好几个小时了。我正在使用 flex，并尝试通过 flex-wrap，改变位置，但两个 div 之间的空间没有出现。 （使用 BEM，因此到处都是类）。

.description {
  margin: 100px auto 0 auto;
  width: 80%;
  display: flex;
  position: relative;
  justify-content: space-between;
}

.two-columns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-width: 784px;
}

.two-columns__brief {
  line-height: 1.2;
  font-size: 18px;
  font-weight: normal;
  color: #2f80ed;
  min-width: 175px;
  display: flex;
  position: relative;
}

.two-columns__main-text {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-self: flex-end;
}

.two-columns__paragraph {
  line-height: 34px;
  font-size: 24px;
  font-weight: normal;
  margin: 0;
}

.two-columns__span-accent {
  line-height: 34px;
  font-size: 24px;
  margin: 30px 0;
}

<section class="description">
  <div class="two-columns">
    <div class="two-columns__brief">Brief</div>
    <div class="two-columns__main-text">
      <p class="two-columns__paragraph">Paragraph 1</p>
      <span class="two-columns__span-accent"><b>Conclusion:</b> span</span>
      <p class="two-columns__paragraph">Paragraph 2</p>
    </div>
  </div>
</section>

Answer 1

首先justify-content: space-between 不会在 html 元素之间创建空间。 It distributes items evenly, the first item is flush with the start, the last is flush with the end。
因此，只有当容器的宽度大于两个 div 的总宽度时，才会出现两个 div 之间的间距。

例如，空间在全屏模式下到位。

但是，如果我删除 min-width，空间就会消失。

Answer 2

我终于知道出了什么问题。我需要在我的 class= two-columns__main-text 中添加 width: 80%，并在 two-columns__brief 中将 min-width 更改为 max-width，这样当我将全文添加到所有内容时

的，间距就像我想要的那样。 感谢所有试图提供帮助的人！

Answer 3

我在布局中添加了一些颜色，所以我们知道是什么：

红色：背景

蓝色带绿色边框：您尝试放置justify-content:space-between;的div的宽度

橙色边框：你的两个div

所以，您的代码是正确的，它可以完全正常工作，但是由于蓝色元素 (.two-columns) 中的宽度错误，它向您显示了错误的结果。

您可以保留min-width 原样，但如果您设置width: 100%，您会看到：

两个 div 之间用空格隔开。