html - 如何使 flex-wrap 平衡其包裹的元素？

<分区>

我正在制作一个响应式布局，在较小的屏幕上有一个侧边栏 <ul>正在变成 display: flex与 flex-wrap: wrap以及样式为 flex-grow: 1 的元素.大多数时候这看起来不错:

但是，当只有几个元素溢出时，例如在稍大的屏幕上，这看起来很糟糕:

有没有办法得到flex-box尝试根据每行具有平衡的总元素宽度来包装东西？例如，在第二个示例中，“People”(可能还有“Protocols”)流到第二行会更有意义。

或者，我应该采用其他方法来布置此菜单吗？

最佳答案

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

例如:

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

那样的话，至少在小屏幕上每行不会超过 4 个元素。

关于html - 如何使 flex-wrap 平衡其包裹的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54952375/