Flexbox响应式导航栏-调整内容：flex-end不起作用

Question

我正在学习Flex-box。我正在尝试使用弹性盒制作一个导航栏，但是有一个问题。我希望我的nav-bar-flex类转到右侧，因此我在课堂上使用了justify-content: flex-end，但是它没有用。 我只想让nav-bar-flex类去右边，而不想去品牌类。 这是我的代码：

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Ariel, Helvetica, sans-serif;
}
.header {
	background: gray;
	border-radius: 0.5em;
}
/*
.main-container {
	width: 90%;
	margin: auto;
	overflow: hidden;
}
*/
.main-head {
	display: flex;
	justify-content: flex-start;
}

.link {
	text-decoration: none;
	text-transform: uppercase;
	color: white;
	text-align: center;
	display: block;
	padding: 1em;
	width: 8em;
}
.nav-bar-flex{
	display: flex;
	justify-content: flex-end;
}
.brand-name {
	width: 15em;
	background: black;
	border-radius: 0.5em;
}
.link:hover{
	background: black;
	border-radius: 0.5em;
}

<header class="header">
			<div class="main-container main-head">
			<div class="brand">
				<a class="brand-name link" href="index.html">Saurabh <span class="highlite">Vishwakarma</span></a>
			</div>
			<div class="nav-bar">
				<nav class="nav-bar-flex">
					<a class="link" href="index.html">Home</a>
					<a class="link" href="services.html">Services</a>
					<a class="link" href="contact.html">Contact</a>
					<a class="link" href="about.html">About</a>	
				</nav>
			</div>
			</div>
		</header>

Answer 1

将margin-left: auto添加到nav-bar元素以拉动右侧导航-参见下面的演示

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Ariel, Helvetica, sans-serif;
}

.header {
  background: gray;
  border-radius: 0.5em;
}


/*
.main-container {
	width: 90%;
	margin: auto;
	overflow: hidden;
}
*/

.main-head {
  display: flex;
  justify-content: flex-start;
}

.link {
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  text-align: center;
  display: block;
  padding: 1em;
  width: 8em;
}

.nav-bar-flex {
  display: flex;
  justify-content: flex-end;
}

.brand-name {
  width: 15em;
  background: black;
  border-radius: 0.5em;
}

.link:hover {
  background: black;
  border-radius: 0.5em;
}

.nav-bar {
  margin-left: auto;
}

<header class="header">
  <div class="main-container main-head">
    <div class="brand">
      <a class="brand-name link" href="index.html">Saurabh <span class="highlite">Vishwakarma</span></a>
    </div>
    <div class="nav-bar">
      <nav class="nav-bar-flex">
        <a class="link" href="index.html">Home</a>
        <a class="link" href="services.html">Services</a>
        <a class="link" href="contact.html">Contact</a>
        <a class="link" href="about.html">About</a>
      </nav>
    </div>
  </div>
</header>