如何使柔性包装平衡其包装物品？

Question

我正在制作一个响应式布局，在较小的屏幕上，侧边栏<ul>正在变成一个display: flex with flex-wrap: wrap和使用flex-grow: 1的项目flex-grow: 1 。 这在大多数情况下看起来很好：

但是，当只有几个项目溢出时，这看起来非常糟糕，例如在稍大的屏幕上：

有没有办法让flex-box尝试根据每行平衡的总项目宽度来包装东西？ 例如，在第二个例子中，“人”（也可能是“协议”）流到第二行会更有意义。

或者，我是否应采取另一种方法来制作此菜单？

jsfiddle链接

Answer 1

您可以添加媒体查询以更改较小视口中的行为。

例如：

@media (max-width: 768px) {
  nav li {
    min-width: 25%;
  }
}

这样，至少在小屏幕上每行不会超过4个项目。