html - 导航栏的 Flex 顺序不正确

Question

我正在尝试对导航栏进行排序，以便顺序是导航，然后是按钮，然后是 h1。
我正在学习教程 here这是youtuber提供的第三个选项。
h1 应该一直推到右侧。
出于某种原因，flex order 在标题中不起作用并以正确的方式对齐。
它应该是这样的:

*{
  box-sizing: border-box;
  padding:0;
  margin:0;
}

body{
  background-color: rgb(54, 54, 54);
  font-family: sans-serif;
  color: white;
}

li, a, button{
  font-weight: 500;
  font-size: 16px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15vh;
  padding: 30px 10%;
}

h1{
  cursor: pointer;
  margin-left: auto;
  order: 3;
}
nav{
  order: 1;
}

ul{
  list-style: none;
}

ul li{
  display: inline-block;
  padding: 0 20px;
}

ul li a{
  transition: all 0.3s ease;
}

ul li a:hover{
  color: pink;
}

.cta{
  order: 2;
}

button{
  padding: 9px 25px;
  background-color: white;
  color: rgb(54, 54, 54);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover{
  background-color: pink;
  color: white;
}

<header>
  <a href="/index.html"><h1>Loonieville</h1></a>
  <nav>
      <ul class='navlinks'>
          <li><a href="/">Main St</a></li>
          <li><a href="/">Town Hall</a></li>
          <li><a href="/">Downtown</a></li>
      </ul>
  </nav>
  <a href="" class='cta'><button>
      Contact
  </button></a>
</header>

Answer 1

问题是order适用于 flexbox 父级的直接子级 .您正在尝试设置 h1 的顺序像这样的元素，它设置了 h1 的顺序在它的父元素中:

    h1{ order: 3; }

如果 h1，这将起作用是 header 的直系 child flexbox 元素，正如您在此工作示例中使用您的代码所看到的:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: rgb(54, 54, 54);
  font-family: sans-serif;
  color: white;
}

li,
a,
button {
  font-weight: 500;
  font-size: 16px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15vh;
  padding: 30px 10%;
}

h1 {
  cursor: pointer;
  margin-left: auto;
  order: 3;
}

nav {
  order: 1;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
  padding: 0 20px;
}

ul li a {
  transition: all 0.3s ease;
}

ul li a:hover {
  color: pink;
}

.cta {
  order: 2;
}

button {
  padding: 9px 25px;
  background-color: white;
  color: rgb(54, 54, 54);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background-color: pink;
  color: white;
}

<header>
  <h1>Loonieville</h1>
  <nav>
    <ul class='navlinks'>
      <li><a href="/">Main St</a></li>
      <li><a href="/">Town Hall</a></li>
      <li><a href="/">Downtown</a></li>
    </ul>
  </nav>
  <a href="" class='cta'><button>
            Contact
        </button></a>
</header>

但是，您的 h1 element 是 a 的子元素元素 而不是 header :

<header><a href="/index.html"><h1>Loonieville</h1></a>...</header>

这意味着 CSS 正在尝试设置 h1 的顺序。在它的父元素中，它是 a .
您需要做的是设置order:3 CSS 在 flexbox 父级的直接子级上，即 a元素本身。您可以通过多种方式执行此操作，例如

给 a 元素一个类，就像你对 cta 所做的那样，例如a.linkWithH1 { order: 3; }

或者简单地将此 CSS 应用于父级的第一个子级:header :first-child { order: 3; }

工作示例:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: rgb(54, 54, 54);
  font-family: sans-serif;
  color: white;
}

li,
a,
button {
  font-weight: 500;
  font-size: 16px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15vh;
  padding: 30px 10%;
}

header :first-child {
  cursor: pointer;
  margin-left: auto;
  order: 3;
}

nav {
  order: 1;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
  padding: 0 20px;
}

ul li a {
  transition: all 0.3s ease;
}

ul li a:hover {
  color: pink;
}

.cta {
  order: 2;
}

button {
  padding: 9px 25px;
  background-color: white;
  color: rgb(54, 54, 54);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background-color: pink;
  color: white;
}

<header>
  <a href="/index.html">
    <h1>Loonieville</h1>
  </a>
  <nav>
    <ul class='navlinks'>
      <li><a href="/">Main St</a></li>
      <li><a href="/">Town Hall</a></li>
      <li><a href="/">Downtown</a></li>
    </ul>
  </nav>
  <a href="" class='cta'><button>
            Contact
        </button></a>
</header>