フレックスボックスで同じ行のナビゲーションバーとヘッダーを実行していますか？

Question

フレックスボックスを使用してヘッダーとナビゲーションバーを同じ行に表示しようとしていますが、問題は、私のh1とh2が左右に、h1とh2が左側に、navが右。あなたがheaderにjustify-content: space-betweenを使用することができます

.heading { 
 
    display: inline-flex; 
 
    justify-content: flex-start; 
 
} 
 
nav { 
 
    display: inline-flex; 
 
    justify-content: flex-start; 
 
}

<header> 
 
    <div class="heading"> 
 
    <h1>NAME</h1> 
 
    <h2>JOB</h2> 
 
    </div> 
 
    <nav> 
 
    <div><a href="index.html">Gallery</a></div> 
 
    <div><a href="about.html">About</a></div> 
 
    <div><a href="contact.html">Contact</a></div> 
 
    </nav> 
 
</header>

Answer 1

：

これは私のコードです。

header, 
 
.heading, 
 
nav { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
header { 
 
    justify-content: space-between; 
 
}

<header> 
 
    <div class="heading"> 
 
    <h1>NAME</h1> 
 
    <h2>JOB</h2> 
 
    </div> 
 
    <nav> 
 
    <div><a href="index.html">Gallery</a></div> 
 
    <div><a href="about.html">About</a></div> 
 
    <div><a href="contact.html">Contact</a></div> 
 
    </nav> 
 
</header>