justify-content: space-between in Flexbox scheint nicht zu funktionieren

Question

Ich habe versucht, mithilfe von Klassen und IDs viele Dinge im CSS zu ändern, aber es scheint keine Möglichkeit zu geben, beide Bilder auf der anderen Seite des Bildschirms anzuzeigen (Logo ganz links, Profil aktiviert). ganz rechts).

Ich habe viele verschiedene Dinge wie text-align 和不同的 justify-contents ausprobiert, aber nichts scheint zu funktionieren.

Das ist der Code:

.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。