弹性框:移动到新行的最后一个导航列表项

Question

我正在尝试在同一行上创建一个导航栏。我尝试使用弹性方向：行。使所有列表项内联，但它不起作用。有什么想法吗？

@media (min-width: 900px) {
  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo-name {
    margin-left: 1%;
  }
  .main-nav {
    display: flex;
    background-color: orange;
  }
  .main-nav li {
    padding: 0.3em;
    align-items: flex-end;
  }
}

<header class="main-header">
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>
  <nav class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">FREE QUOTE</a></li>
  </nav>
</header>

Answer 1

问题出在@media (min-width: 900px)，只需将您的 css 代码移到块之外@media (min-width: 900px)然后一切正常。一个小问题是您在nav标签中定义了li标签，该标签在语义上不正确，标记无效，您应该用ul标签替换nav

@media (min-width: 100px) {
  
}
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo-name {
    margin-left: 1%;
  }
  .main-nav {
    display: flex;
    list-style-type: none;
    background-color: orange;
  }
  .main-nav li {
    padding: 0.3em;
    align-items: flex-end;
  }

<header class="main-header">
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>
  <ul class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">FREE QUOTE</a></li>
  </ul>
</header>

Answer 2

如果菜单不应该有 2 行，您可以使用flex-wrap: no-wrap;。

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-name {
  margin-left: 1%;
}
.main-nav {
  background-color: orange;
  display: flex;
  justify-content: space-between;
  flex-wrap: no-wrap;
}
.main-nav li {
  padding: 0.3em;
  list-style-type: none;
}

<header class="main-header">
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>
  <nav class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">FREE QUOTE</a></li>
  </nav>
</header>