justifier-contenu : l'espace entre les deux dans Flexbox ne semble pas fonctionner

Question

J'ai essayé de changer beaucoup de choses dans le CSS en utilisant des classes et des identifiants, mais il ne semble pas y avoir de moyen de placer les deux images de l'autre côté de l'écran (logo à l'extrême gauche, profil sur l'extrême droite).

J'ai essayé beaucoup de choses différentes comme text-align 和不同的 justify-contents mais rien ne semble fonctionner.

Voici le 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 ne fait plus rien car il est défini sur un div sans display:flex. Si vous souhaitez des divs séparés pour les images, placez justifier-content:space- Between sur le div qui les contient, c'est-à-dire le div de navigation supérieur.