使用flexbox进行导航[重复]

Question

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

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

根据我对每个flex box的理解，应该使用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>