twitter-bootstrap - 使用平衡的 CSS flex-wrap 容器进行导航

Question

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

我的情况:我有这个导航，在桌面上所有元素都排成一行。使用 flex:auto 元素填满所有空间。现在，当我调整浏览器大小时，在某个点，当没有更多空间时，flex-wrap 会自动为我创建第二行。

看我小DEMO或者看看这张图片:

这就是让我发痒的地方:只有第一个元素在第二行(第一次换行时)。这不是真正的平衡，并且对这个元素给予了很多关注。我想要的是平均分配它们。我在这里缺少一种仅 CSS 不包含黑客的方式吗？

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

EDIT2:为了更好地理解:text-wrap: balance 是一个提议，只对用于排版的纯文本 block 做基本相同的事情。

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

EDIT4:想想 CSS 列，这里的内容跨越列，但内容方向只能在 N 形式(逐列)中，想象在 Z 形式(逐行)中也是如此。

Answer 1

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