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

【问题标题】：Flexbox: last nav list item moving to a new lineFlexbox：最后一个导航列表项移动到新行
【发布时间】：2017-10-23 05:43:29
【问题描述】：

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

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

【问题讨论】：

屏幕宽度大于900px时菜单项在同一行，这是您在媒体查询中设置的。

标签： html css responsive-design navigation flexbox

【解决方案1】：

问题出在@media (min-width: 900px)，只需将你的css代码移到@media (min-width: 900px)块之外，一切都会好起来的。一个小问题是您在nav 标签中定义了li 标签，这在语义上是不正确的，无效的标记，您应该将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>

【讨论】：

【解决方案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>

【讨论】：