有没有一种方法可以限制导航子菜单flexbox中每行的项目数量？

Question

我的主导航项中有很多子项，但我想保持它们的视觉吸引力和整洁性。我正在尝试限制每行4个子菜单项。

我已经在线检查了其他帖子，他们的解决方案包括添加flex: 1 1 25%;，我已经尝试过了，但是没有任何变化。

.nav {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 0px;
  border: none;
  width: 100%;
  margin: 0;
  padding: 25px 0;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.item {
  color: black;
  font-weight: bold;
  text-transform: uppercase;
}

.submenu {
  display: none;
  align-items: center;
  align-text: center;
  position: absolute;
  top: 107px;
  left: 0;
  right: 0;
  text-transform: uppercase;
  z-index: 1;
  background-color: #2F4F4F;
  color: white;
}

.item.has-children:hover .submenu {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 10;
  flex-wrap: wrap;
  flex: 1 1 calc(25% - 80px);
  color: black;
  background-color: rgba(255, 255, 255, .8);
}

<nav>
  <ul class="nav">
    <li class="item">
      <a href="index.html">
        <img src="Images/Navigation/Intak Logo 25px High.png" alt="Home" />
      </a>
    </li>
    <li class="item has-children" style="color:#4D4D4D;">Printing
      <ul class="submenu">
        <li>Labels & Stickers</li>
        <li>Banners</li>
        <li>A-Frame</li>
        <li>Menu Boards</li>
        <li>Takeout Menus</li>
        <li>Business Cards</li>
        <li>Dine-In Menus</li>
        <li>Posters</li>
        <li>Envelopes</li>
        <li>Chinese Wedding Cards</li>
        <li>Flyers</li>
        <li>Letterheads</li>
        <li>Brochures</li>
        <li>Vinyl</li>
        <li>NCR Forms</li>
        <li>Catalogues</li>
      </ul>
    </li>
    <li class="item has-children">Graphic Design
      <ul class="submenu">
        <li>Logo Design</li>
        <li>Ads/Flyers/Promotions</li>
        <li>Menu Boards (Digital & Boards)</li>
        <li>Menus (Takeout & Dine-In)</li>
      </ul>
    </li>
    <li class="item has-children">Chinese Calendars
      <ul class="submenu">
        <li>Cane Wallscroll</li>
        <li>Wall</li>
        <li>Mini</li>
        <li>Desk</li>
        <li>Special Desk</li>
        <li>Red Packet</li>
        <li>More</li>
        <li></li>
      </ul>
    </li>
    <li class="item">FAQS</li>
    <li class="item">Contact Us</li>
  </ul>
</nav>
```

我希望它形成：
1 2 3 4
5 6 7 8
9 10 11 12

但停留：12345678

Answer 1

尝试在.sub菜单中添加 flex-wrap ，在li项目中添加 25％宽度。

.submenu {
  ...
  flex-wrap: wrap;
}

.submenu li {
  width: 25%;
}

示例：https://codepen.io/giumagnani/pen/QPEjxp