使用平衡的 CSS flex-wrap 容器导航

Question

我真的很喜欢新的 CSS flexbox 设计可能性。特别是flex-wrap: wrap可以成为节省一些空间的强大工具（例如简单的移动导航设计模式）。

我的情况：我有这个导航，在桌面上所有项目都排成一行。随着flex:auto该项目填补了所有的空间。现在，当我调整浏览器的大小时，在某个时刻，当没有更多空间时，flex-wrap 会自动为我创建第二行。

看我的小DEMO或看看这张图片：

这就是让我发痒的原因：只有第一项在第二行（当第一次包装发生时）。这并不是真正的平衡，并且对这个项目给予了很多关注。我想要的是平均分配它们。是否有我在这里缺少的仅包含CSS 的不包含黑客的方式？

编辑：我为动态网络应用程序做这个布局。此导航应适合不同的视图和情况。所以我不想关心会有多少项目。理想情况下，标记应该是一个简单的ul li列表（没有额外的行，没有额外的类）。所以我真的在寻找某种 CSS 参数魔法。

EDIT2：为了更好地理解：text-wrap: balance是一个建议，只对排版的纯文本块进行基本相同的处理。

EDIT3：例如，参见 Bootstrap CSS 框架网格模型。这里有各种列宽。您需要为每个设备宽度定义一列占用多少空间（三分之一，四分之一），例如：此列占用桌面宽度的四分之一，但仅占用手机宽度的一半。当浏览器可以证明这一点时，它会不会更酷？

EDIT4：想想CSS-columns，这里的内容跨越列，但内容方向只能在N-form（逐列）中，想象在Z-form（逐行）中相同。

Answer 1

当出现这种不需要的布局时，使用媒体查询来隔离视口宽度。将该flex-grow属性应用于您想要比其他项目更大的项目。例如，您可以将第一个和最后一个项目设置为flex-grow: 2;，它们的宽度将是第二个和第三个项目的两倍。