Html 屏幕缩小时均匀分割项目

我有一个菜单，可以有不同数量的项目。随着屏幕宽度的减小，我想让一半的菜单降到第二行。理想情况下，我可以让这种情况再次发生，因为屏幕变得更小，有四行，但老实说，在我可以隐藏它并显示汉堡图标之前，两行可能就足够了

目前，当屏幕变得太小时，它只是变成了一个垂直菜单

---

我不确定我所要求的是一件普通、简单的事情，还是需要一些定制的编码来完成。所以我也愿意接受其他解决方案。例如，我有一个想法，可能是将每三个菜单项包装在一个div中，这样它可能不会产生我想要的均匀分割，但会一次向下移动三个菜单项，这不是我的第一选择，但我认为这是一个可行的折衷办法。

您可以将菜单项包装到第二个（或更多）通过限制导航栏

ul

的宽度并添加

flex wrap.

您将无法使菜单项平均换行（菜单项将到达空间末端，然后换行），但这对您很重要，您可以使用自定义媒体查询调整导航栏

ul

的宽度，以使菜单项移动更平均