La propriété `justify-content` ne fonctionne pas sur la flexbox imbriquée

Question

Je ne suis pas familier avec HTML et CSS et j'ai rencontré un problème avec le menu que je suis en train de coder.

Je voudrais faire un menu en utilisant l'imbrication flexbox. Il se fait à ce que je veux, mais pour une raison que je ne comprends pas, le justify-content intérieur des enfants FlexBox ne semble pas appliquer ...

Voici mon code:

header { 
 
    display: inline-flex; 
 
    height: 90px; 
 
    align-items: center; 
 
    justify-content: flex-start; 
 
} 
 
.avatar { 
 
    display: inline-flex; 
 
    height: inherit; 
 
    width: 200px; 
 
    background-color: #00D717; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
} 
 
.avatar h1 { 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    color: white; 
 
} 
 
.resteHeader { 
 
    display: inline-flex; 
 
    height: inherit; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
} 
 
.resteHeader nav { 
 
    display: inline-flex; 
 
    height: inherit; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 
.resteHeader nav ul { 
 
    display: inline-flex; 
 
    height: inherit; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}

<header> 
 
    <div class="avatar"> 
 
    <img src="img/avatar.png"> 
 
    <h1>Hoang Nguyen</h1> 
 
    </div> 
 
    <div class="resteHeader"> 
 
    <nav> 
 
     <ul> 
 
     <li> 
 
      <a href="#"> 
 
      <img src="img/silhouette.png" alt=""> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <img src="img/bulle.png" alt=""> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="#"> 
 
      <img src="img/cloche.png" alt=""> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    <img class="logo" src="img/logo.png" alt=""> 
 
    <form> 
 
     Type sor search 
 
     <input type="text"> 
 
     <img src="img/loupe.png" alt=""> 
 
    </form> 
 
    </div> 
 
</header>

Merci pour votre aide!

Answer 1

display:inline-flex signifie que votre conteneur se comporte comme un élément en ligne - c'est-à-dire seulement aussi large qu'il doit l'être.

Il ne fait aucun sens de préciser justify-content: space-around sur un conteneur display:inline-flex à moins que le conteneur a aussi une largeur (que beaucoup de vos display:inline-flex conteneurs ne le font pas)

Answer 2

La propriété justify-content dans votre code fonctionne bien.

Le problème est que vous utilisez display: inline-flex, ce qui rend le conteneur flexible seulement aussi large que le contenu, laissant justify-content sans espace supplémentaire à distribuer.

Essayez d'utiliser display: flex ou d'ajouter width: 100% à vos règles.

header { 
 
    display: inline-flex; 
 
    height: 90px; 
 
    align-items: center; 
 
    /* justify-content: flex-start; OFF FOR TESTING */ 
 
    justify-content: flex-end;   /* WORKING */ 
 
    width: 100%; 
 
} 
 

 
.avatar { 
 
    display: inline-flex; 
 
    height: inherit; 
 
    width: 200px; 
 
    background-color: #00D717; 
 
    align-items: center; 
 
    /* justify-content: space-around; OFF FOR TESTING */ 
 
    justify-content: flex-start;  /* WORKING */ 
 
} 
 

 
.avatar h1 { 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    color: white; 
 
} 
 

 
.resteHeader { 
 
    display: inline-flex; 
 
    height: inherit; 
 
    align-items: center; 
 
    /* justify-content: flex-start; OFF FOR TESTING */ 
 
    justify-content: space-between; /* WORKING */ 
 
    width: 100%; 
 
} 
 

 
.resteHeader nav { 
 
    display: inline-flex; 
 
    height: inherit; 
 
    align-items: center; 
 
    /* justify-content: space-around; OFF FOR TESTING */ 
 
    justify-content: center;   /* WORKING */ 
 
    width: 100%; 
 
} 
 

 
.resteHeader nav ul { 
 
    display: inline-flex; 
 
    height: inherit; 
 
    align-items: center; 
 
    /* justify-content: space-between; OFF FOR TESTING */ 
 
    width: 100%; 
 
}

<header> 
 
    <div class="avatar"> 
 
     <img src="img/avatar.png"> 
 
     <h1>Hoang Nguyen</h1> 
 
    </div> 
 

 
    <div class="resteHeader"> 
 
     <nav> 
 
      <ul> 
 
       <li> 
 
        <a href="#"><img src="img/silhouette.png" alt=""></a> 
 
       </li> 
 
       <li> 
 
        <a href="#"><img src="img/bulle.png" alt=""></a> 
 
       </li> 
 
       <li> 
 
        <a href="#"><img src="img/cloche.png" alt=""></a> 
 
       </li> 
 
      </ul> 
 
     </nav> 
 

 
     <img class="logo" src="img/logo.png" alt=""> 
 

 
     <form> 
 
      Type sor search 
 
      <input type="text"> 
 
      <img src="img/loupe.png" alt=""> 
 
     </form> 
 
    </div> 
 
</header>