Flexbox 导航元素以最奇怪的方式自行溢出

Question

在测试响应性时，我遇到了最奇怪的问题。我有这些代码用于将标题对齐为弹性框，当我将其调整为超过 900 像素宽度时，导航栏会脱离标题并显示在下一个元素的顶部。

像这样：

这件事一直发生到 1205px 宽度，然后它得到了我期望的方式。

像这样：

由于我为桌面屏幕添加了媒体查询，所以不应发生第一张图片中的异常。

这是该部分的主要代码：

HTML：

<header>
    <a href="#"><img class="logo" src="images/img-tea-cozy-logo.webp" alt="The Tea Cozy Logo"></a>
    <nav>
        <ul class="bar">
            <li><a href="#mission">Mission</a></li>
            <li><a href="#featured">Featured Tea</a></li>
            <li><a href="#locations">Locations</a></li>
        </ul>
    </nav>
</header>

CSS：

/* Header */
header {
    max-width: 100%;
    height: 4.54em;
    border-bottom: 1px solid seashell;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: black;
}

header a img {
    height: 2.18em;
    margin-top: 0.45em;
}

nav ul li {
    display: inline-flex;
    text-decoration: underline;
    padding: 0.13em 0.25rem 0 0.25rem;
}

nav ul li a {
    color: seashell;
}

这是桌面的媒体查询：

/* Header for Desktop Screens */
@media only screen and (min-width: 900px) {
    header {
        height: 3.13em;
        justify-content: space-between;
    }
    
    header a img {
        height: 2.27em;
        margin: 0.30em 0 0 0.45em;
    }
    
    nav ul li {
        padding: 0;
        margin: 0.45em 0.45em;
        font-size: 1em;
    }
}

当我在条件后面插入 "and" 时发生了最奇怪的事情，像这样：

@media only screen and (min-width: 900px) and {
...
}

然后它在不应该的情况下得到了修复，因为这不是正确的语法：

谁能帮我了解这里发生了什么以及如何解决第一张图片中的问题？

Answer 1

您忘记为媒体查询定义flex-direction: row：

/* Header */

header {
  max-width: 100%;
  height: 4.54em;
  border-bottom: 1px solid seashell;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: black;
}

header a img {
  height: 2.18em;
  margin-top: 0.45em;
}

nav ul li {
  display: inline-flex;
  text-decoration: underline;
  padding: 0.13em 0.25rem 0 0.25rem;
}

nav ul li a {
  color: seashell;
}


/* Header for Desktop Screens */

@media only screen and (min-width: 900px) {
  header {
    height: 3.13em;
    justify-content: space-between;
    flex-direction: row;
  }
  header a img {
    height: 2.27em;
    margin: 0.30em 0 0 0.45em;
  }
  nav ul li {
    padding: 0;
    margin: 0.45em 0.45em;
    font-size: 1em;
  }
}

<header>
  <a href="#"><img class="logo" src="images/img-tea-cozy-logo.webp" alt="The Tea Cozy Logo"></a>
  <nav>
    <ul class="bar">
      <li><a href="#mission">Mission</a></li>
      <li><a href="#featured">Featured Tea</a></li>
      <li><a href="#locations">Locations</a></li>
    </ul>
  </nav>
</header>