`justify-content`プロパティがネストされたフレックスボックスで動作しません

Question

私はHTMLとCSSが新しく、現在コーディングしているメニューに問題が発生しました。

ネストフレックスボックスを使用してメニューを作成したいと思います。それは私が欲しいものに近づいていますが、私は理解できない理由で、子どもたちのフレキシボックス内のjustify-contentが適用されていないようです...ここで

は私のコードです：

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>

ご協力いただきありがとうございます。

Answer 1

display:inline-flexは、コンテナをインライン要素のように動作させることを意味します。

コンテナはまた、あなたのコード内でjustify-contentプロパティが正常に動作している幅（あなたdisplay:inline-flexコンテナの多くがそうでない）

Answer 2

を持っていない限り、それはdisplay:inline-flexコンテナ上justify-content: space-aroundを指定しても意味がありません。

display: inline-flexを使用しているため、フレックスコンテナの内容がコンテンツの幅と同じになります。justify-contentは配信する余分なスペースがありません。

display: flexを使用するか、width: 100%をルールに追加してみてください。

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>

コンテナ