html - 使用 flex box 在同一行上做一个导航栏和标题？

Question

我正在尝试使用 flex box 使我的标题和导航栏出现在同一行，但问题是我的 h1 和 h2 必须并排，h1 和 h2 必须在左边，而 nav 必须在左边权利。

这是我的代码:

.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 上使用 justify-content: space-between。

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>