用弹性框在同一行上做一个导航栏和标题？答案

【问题标题】：Doing a nav bar and headers on same line with flex box?用弹性框在同一行上做一个导航栏和标题？
【发布时间】：2017-01-04 17:43:49
【问题描述】：

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

这是我的代码：

.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>

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：