使用 flexbox 进行导航 [重复]

Question

我遇到的一个问题是水平导航栏。我已经使用 flexbox 实现了它。

我有这个导航栏，当我缩小它时，列表项（有黑色边框）不会留在无序列表容器（有紫色边框）内

据我了解，每个 flex 框都应该使用 flex 属性在父容器中调整大小。但是在我的情况下，列表项没有在无序列表容器中调整大小。这是正在发生的事情的图片：

这是我的html代码：

nav.horizontalNavigation {
  width: 100%;
  padding: 0;
  clear: both;
}

nav.horizontalNavigation ul {
  display: flex;
  flex-flow: row nowrap;
  border: 3px solid purple;
  width: 100%;
  padding: 0;
  margin: 0;
}

nav.horizontalNavigation>ul li {
  display: flex;
  flex: 1 1 auto;
  border: 2px solid black;
  background-color: rgb(117, 140, 72);
  font-size: 1.3em;
  line-height: 2em;
  text-transform: uppercase;
  list-style-type: none;
}

nav.horizontalNavigation>ul li a {
  flex: 1 1 auto;
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  color: white;
}

<header>

  <nav class="horizontalNavigation">
    <ul>
      <li><a href="#ll_home.html">HOME</a></li>
      <li><a href="#ll_services.html">SERVICES</a></li>
      <li><a href="#ll_commercial.html">COMMERCIAL & STRATA</a></li>
      <li><a href="#ll_contact.html">CONTACT US</a></li>
      <li><a href="#ll_gallery.html">GALLERY</a></li>
    </ul>
  </nav>

</header>

Answer 1

检查一下，您没有足够的空间将所有内容放在一行中，因此您需要换行。

nav.horizontalNavigation {
  width: 100%;
  padding: 0;
  clear: both;
}

nav.horizontalNavigation ul {
  display: flex;
  flex-flow: row nowrap;
  border: 3px solid purple;
  width: 100%;
  padding: 0;
  margin: 0;
}

nav.horizontalNavigation>ul li {
  display: flex;
  flex: 1 1 auto;
  border: 2px solid black;
  background-color: rgb(117, 140, 72);
  font-size: 1.3em;
  max-width: 20%;
  line-height: 2em;
  text-transform: uppercase;
  list-style-type: none;
}

nav.horizontalNavigation>ul li a {
  flex: 1 1 auto;
  display: block;
  margin: auto;
  text-align: center;
  color: white;
}

<header>

  <nav class="horizontalNavigation">
    <ul>
      <li><a href="#ll_home.html">HOME</a></li>
      <li><a href="#ll_services.html">SERVICES</a></li>
      <li><a href="#ll_commercial.html">COMMERCIAL & STRATA</a></li>
      <li><a href="#ll_contact.html">CONTACT US</a></li>
      <li><a href="#ll_gallery.html">GALLERY</a></li>
    </ul>
  </nav>

</header>