使用flexbox定位？

Question

大家好我试图重新创建：

这就是我所拥有的：

我做了所有事情，除了我似乎无法将导航药水放到页面右侧。任何建议我能做些什么来使它工作？这样做的最佳方式是什么？为什么？

index.html：

header {
  display: flex;
  font-family: Verdana;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid black;
}

.logo{
  display: flex;
  align-items: center;
  margin-left: 20px;
}

nav span {
  display: inline-block;
  padding-right: 40px;
  justify-content: flex-end;
}
.logo span {
  color: MediumAquamarine;
  padding-left: 10px;
}

style.css：

{{1}}

Answer 1

将justify-content: space-between;添加到标题

＆＃13;

＆＃13;

    header {
      display: flex;
      font-family: Verdana;
           justify-content: space-between;
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px solid black;
    }

    .logo{
      display: flex;
      align-items: center;
      margin-left: 20px;
    }

    nav span {
      display: inline-block;
      padding-right: 40px;
      justify-content: flex-end;
    }
    .logo span {
      color: MediumAquamarine;
      padding-left: 10px;
    }

＆＃13;

<header>
  <div class="logo">
    <img src="./resources/images/img-myt-logo.jpg" alt="Our logo">
    <span>My Times</span>
  </div>
  <nav>
    <span>World</span>
    <span>U.S</span>
    <span>Tech</span>
    <span>Science</span>
  </nav>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我理解你要问的内容，你需要证明内容的合理性，这样才能打开你的logo div和nav元素之间的空间。最简单的方法是在标题中为CSS添加对齐内容......

header {
  display: flex;
  font-family: Verdana;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid black;
  justify-content:space-between;
}

.logo{
  display: flex;
  align-items: center;
  margin-left: 20px;
}

nav span {
  display: inline-block;
  padding-right: 40px;
  justify-content: flex-end;
}
.logo span {
  color: MediumAquamarine;
  padding-left: 10px;
}

你在导航范围内的合理内容将证明导航内容是合理的，而不是在标题中证明导航元素本身。