Html 没有最后一个元素的更多行上的Flex菜单？

简单的行菜单与flex。在某些视口中，宽度（~600px）被菜单分割，第二行只有一个单独的元素。如何更好地分割菜单

截图：

例如，“更好”表示第一行有4个元素，第二行有3个元素。或者第一行有5个元素，第二行有2个元素。只是这不是6:1

这是我的

*{
框大小：边框框；
}
html{
字体：佐治亚，衬线；
颜色：#333；
背景：#a0522d；
线高：1.5；
}
保险商实验室{
显示器：flex；
柔性包装：包装；
最大宽度：75em；
保证金：0自动；
字体系列：helvetica；
填充：0
}
ulli{
列表样式：无；
柔性生长：1；
/*最大宽度：16雷姆*/
}
ullia{
线高：1.5；
填料：0.2米0.2米；
显示：块；
文本对齐：居中；
边界半径：0.313em；
背景：一枝黄花；
保证金：0.063em；
文字装饰：无；
}

您可以使用媒体查询并更改元素的弹性属性，如下所示：

*{
框大小：边框框；
}
html{
字体：佐治亚，衬线；
颜色：#333；
背景：#a0522d；
线高：1.5；
}
保险商实验室{
显示器：flex；
柔性包装：包装；
最大宽度：75em；
保证金：0自动；
字体系列：helvetica；
填充：0
}
ulli{
列表样式：无；
柔性生长：1；
}
ullia{
线高：1.5；
填料：0.2米0.2米；
显示：块；
文本对齐：居中；
边界半径：0.313em；
背景：一枝黄花；
保证金：0.063em；
文字装饰：无；
}
@介质和全部（最大宽度：620px）{
ulli{
弹性：0.25%；
}
第n个孩子（n+5）{
弹性：0.33%；
}
}
@全部和全部介质（最大宽度：500px）{
第n个孩子（n）{
弹性：0.50%；
}
最后一个孩子{
弹性：0.100%；
}
}
@介质和全部（最大宽度：320px）{
第n个孩子（n）{
弹性：0.100%；
}
}

这是我的解决方案，使用

flex-basis

结合媒体查询来实现所需的结果，

flex-basis

值可以根据您的要求进行更改

*{
框大小：边框框；
}
html{
字体：佐治亚，衬线；
颜色：#333；
背景：#a0522d；
线高：1.5；
}
保险商实验室{
显示器：flex；
柔性包装：包装；
最大宽度：75em；
保证金：0自动；
字体系列：helvetica；
填充：0；
}
ulli{
列表样式：无；
柔性生长：1；
/*最大宽度：16雷姆*/
边缘底部：2px；
}
ullia{
线高：1.5；
填料：0.2米0.2米；
显示：块；
文本对齐：居中；
边界半径：0.313em；
背景：一枝黄花；
保证金：0.063em；
文字装饰：无；
身高：100%；
}
@仅介质屏幕和（最大宽度：630px）{
ulli{
弹性基准：20%；
}
}

code：谢谢，但是：1）这个解决方案也有孤独的元素。视口中的宽度为931px-935px。2） 解决方案应针对不同的元素宽度（文本宽度）。不是为所有人都设置一个。它是柱子，而不是漂亮的砖墙；）@MartinMilichovský在这里的片段中？@MartinMilichovský如果需要，您可以增加媒体查询的最大宽度。。。但在931-935之间我看不到任何孤独的元素。。。你在使用更多的CSS吗？@MartinMilichovský好的，我知道了，你能更改HTML结构吗？“在这里的代码片段中？”是：@MartinMilichovský更正了它！元素中多行上的单词会造成不必要的高度：（@MartinMilichovský减小字体大小，还有其他CSS修复程序，但使用问题中的方法，您可以实现所需的行布局！寻找具有不同字宽和不同字体设置的通用解决方案。@MartinMilichovský请看我的推理，如果文本大于容器，显然是xt将折叠以便用户可以看到内容，如果文本未折叠，则文本将从容器中溢出（溢出），这将看起来非常难看，因此通用解决方案是在字体大小或任何其他css之间进行折衷，以调整文本以适应容器！