如何让flex-wrap平衡其包裹的物品？

Question

我正在制作响应式布局，在较小的屏幕上，侧边栏<ul>变成了display: flexwith flex-wrap: wrap，并且项目的样式为flex-grow: 1。大多数时候这看起来都很好：

然而，当只有几个项目溢出时，例如在稍大的屏幕上，这看起来很糟糕：

有没有什么方法可以flex-box尝试根据每行平衡的总项目宽度来包装事物？例如，在第二个示例中，“People”（也许还有“Protocols”）流到第二行会更有意义。

或者，我应该采取另一种方法来布置此菜单吗？

Answer 1

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

例如：

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

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