CSS Flexbox：导航不堆叠（变成一列）答案

【问题标题】：CSS Flexbox: Navigation is not stacking (becoming one column)CSS Flexbox：导航不堆叠（变成一列）
【发布时间】：2019-08-14 10:52:15
【问题描述】：

我希望我的导航 <li> 项目能够像现在一样彼此并排。但是当屏幕尺寸为 545 像素或更小时，我希望它们彼此重叠（1 列）。

导航在达到 545 像素时不会变为 1 列。

我已尝试添加flex-direction: column 到@media(max-width: 545px) 给nav ul

    nav {
  padding-left: 0px;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  margin-right: 50px;
}

nav ul li a {
  color: #8B8B8B;
  text-decoration: none;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
}

nav ul li a:hover {
  color: #56B8AE;
  border-bottom: 1px solid;
  /* I WANT A ONE ROW STACK OF THE NAV ONCE THE SCREEN IS 545px or SMALLER */
  @media (max-width: 545px) {
    nav {
      padding-top: 0;
      padding-bottom: 30px;
      margin-top: 0;
      min-height: 100px;
      text-align: center;
    }
    nav ul {
      flex-direction: column;
    }
    nav ul li {
      border-top: solid 1px #e6ecf0;
      padding-bottom: 5px;
    }

<head>
  <link rel="stylesheet" href="style.css">
</head>
<header>
  <nav>
    <ul class="top-nav">
      <li class="top-nav-links"><a href="#"><i class="fas fa-home"></i> Home</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-store"></i> Shop</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-music"></i> Music</a></li>
    </ul>
  </nav>
  <header>

我希望它变成 545 像素或更少的一列。但它会保留为一排。

【问题讨论】：

标签： html css flexbox media-queries responsive

【解决方案1】：

只需在容器上添加flex-wrap: wrap;。注意：与您的问题无关，但您也应该将<header> 移到<body> 中。

    nav {
  padding-left: 0px;
}

nav ul {
  display: flex;
  flex-wrap:wrap;
}

nav ul li {
  list-style: none;
  margin-right: 50px;
}

nav ul li a {
  color: #8B8B8B;
  text-decoration: none;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
}

nav ul li a:hover {
  color: #56B8AE;
  border-bottom: 1px solid;
  /* I WANT A ONE ROW STACK OF THE NAV ONCE THE SCREEN IS 545px or SMALLER */
  @media (max-width: 545px) {
    nav {
      padding-top: 0;
      padding-bottom: 30px;
      margin-top: 0;
      min-height: 100px;
      text-align: center;
    }
    nav ul {
      flex-direction: column;
    }
    nav ul li {
      border-top: solid 1px #e6ecf0;
      padding-bottom: 5px;
    }

<head>
  <link rel="stylesheet" href="style.css">
</head>
<header>
  <nav>
    <ul class="top-nav">
      <li class="top-nav-links"><a href="#"><i class="fas fa-home"></i> Home</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-store"></i> Shop</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-music"></i> Music</a></li>
    </ul>
  </nav>
  <header>

【讨论】：

感谢您的回答。这个解决方案的挑战在于，当空间用完时，它会开始一个一个地堆叠。我希望它在 1 行中堆叠（在一行中，3 个项目彼此重叠），只要屏幕为 545 像素或更小。
啊，好吧，错过了。看到@Johannes提到的语法错误，我认为这是正确的答案。
您还应该编辑我们的问题，将“行”替换为“列”：这就是令人困惑的原因。

【解决方案2】：

您只是忘记在媒体查询之前使用} 关闭nav ul li a:hover 规则（然后在媒体查询结束时再次关闭）。如果你添加它，它会起作用：

nav {
  padding-left: 0px;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  margin-right: 50px;
}

nav ul li a {
  color: #8B8B8B;
  text-decoration: none;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
}

nav ul li a:hover {
  color: #56B8AE;
  border-bottom: 1px solid;
}


/* I WANT A ONE ROW STACK OF THE NAV ONCE THE SCREEN IS 545px or SMALLER */

@media (max-width: 545px) {
  nav {
    padding-top: 0;
    padding-bottom: 30px;
    margin-top: 0;
    min-height: 100px;
    text-align: center;
  }
  nav ul {
    flex-direction: column;
  }
  nav ul li {
    border-top: solid 1px #e6ecf0;
    padding-bottom: 5px;
  }
}

<head>
  <link rel="stylesheet" href="style.css">
</head>
<header>
  <nav>
    <ul class="top-nav">
      <li class="top-nav-links"><a href="#"><i class="fas fa-home"></i> Home</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-store"></i> Shop</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-music"></i> Music</a></li>
    </ul>
  </nav>
  <header>

【讨论】：

不敢相信我错过了。下次我将使用 CSS 验证器。感谢您的宝贵时间！