CSS Flexbox：导航不堆叠（成为一列）

Question

我希望我的导航 <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 像素或更小的一栏。但它仍然是一行。

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

Answer 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 Flexbox：导航不堆叠（成为一列）

CSS Flexbox: Navigation is not stacking (becoming one column)

html

css

media-queries

flexbox

responsive