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

Posted 2023-03-06

【中文标题】使用平衡的 CSS flex-wrap 容器导航

【英文标题】：Navigation with balanced CSS flex-wrap containers

【发布时间】：2014-01-10 19:48:53

【问题描述】：

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

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

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

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

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

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

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

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

【问题讨论】：

我做了更多的研究。在我看来，没有优雅的解决方案。

我在编辑后失去了对您问题的理解。如果您想要简单的标记 - 享受默认的多行算法。如果您想要自定义行为 - 相应地调整标记。

我不认为你想要的可以实现，但我非常希望被证明是错误的。

【参考方案1】：

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

【讨论】：

谢谢。也是一个巧妙的想法。正如我在上面编辑的：我对列表中的项目了解不多。此外，我的目标是尽可能减少媒体查询。