Flexbox中的justify-content: space-between似乎无效

Question

我尝试过使用类和 ID 来更改 CSS 中的许多内容，但似乎没有任何方法可以使两个图像都位于屏幕的远端（徽标位于最左侧，个人资料位于最右侧） ）。

尝试了很多不同的东西，例如 text-align 和不同的 justify-contents 但似乎没有任何效果。

这是代码：

.top-nav {
  display: flex;
  position: absolute;
  background-color: blue;
  opacity: 0.5;
  height: 10%;
  top: 0;
  width: 100%;
  left: 0;
  padding: 0;
  border: 0;
  margin: 0;
  list-style: none;
}

.top-nav div {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin: 0px;
  padding: 0;
  border: 0;
  margin: 0;
}

<div class="top-nav">
  <div style="flex-grow: 1"><img src="/textures/logo.svg"></div>
  <div style="flex-grow: 1"><img src="/textures/profile.svg"></div>
</div>

Answer 1

justify-content 现在什么也不做，因为它设置在没有 display:flex 的 div 上。 如果您想要将图像分开的 div，请将 justify-content:space- Between 放在包含它们的 div 上，即顶部导航 div。