Flexbox：最后一个导航列表项移动到新行

Question

我正在尝试在同一行创建一个导航栏。我尝试过使用flex-direction：row。使所有列表项内联，但它没有工作。有什么想法吗？

＆＃13;

＆＃13;

@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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

@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;。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;