将网站顶部导航栏中的一行标签拆分为两行

如何解决将网站顶部导航栏中的一行标签拆分为两行

我是这里的编码新手，所以我非常感谢我能在这里得到的任何帮助。所以我正在编写一个网站，我的网站顶部有一个导航栏。这是代码。

<!-- Main Body -->
  <body id= "home">
      <!-- Header -->
      <header class="first-page">
        <div id="navbar" class="navbar-top">
          <nav>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#education">Education</a></li>
              <li><a href="#qualifications">Qualifications</a></li>
              <li><a href="#experience">Experience</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </nav>
        </div>

这是 CSS。

#navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  opacity: 0.8;
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0px;
  padding: 0 30px;
  transition: 0.5s;
  z-index: 2;
}

#navbar a {
  color: #fff;
  padding: 10px 20px;
  margin: 0 5px;
}

#navbar a:hover {
  border-bottom: #28a745 2px solid;
}

#navbar ul {
  display: flex;
}

当我尝试进行媒体查询时，我似乎无法将这一行导航栏分成两个单独的行。如果一直排成一排，手机浏览会很拥挤。因此，我想将此行拆分为两行以用于导航栏。

谁能帮帮我？谢谢你。 :)

解决方法

添加

flex-wrap: wrap;

到 flexbox 容器，例如。 '#navbar ul'