Как заставить flex-wrap сбалансировать свои обернутые предметы?

Question

Я делаю адаптивный макет, и на маленьких экранах боковая панель <ul> превращается в display: flex с flex-wrap: wrap, а элементы, стилизованные с flex-grow: 1.Это выглядит нормально в большинстве случаев:

Однако это выглядит довольно плохо, когда переполняется только пара элементов, например, на экране немного большего размера:

Есть ли способ получить flex-box, чтобы попытаться обернуть вещи, основываясь на сбалансированной общей ширине элемента в строке?Например, во втором примере для «Людей» (и, может быть, также для «Протоколов») было бы гораздо больше смысла переходить на вторую строку.

Или есть альтернативный подход, который мне следуетбыть готовым выложить это меню?

jsfiddle link

Answer 1

Вы можете добавить медиазапрос, чтобы изменить поведение в меньших окнах просмотра.

Например:

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

Таким образом, по крайней мере, у вас будет не более 4 элементов встрока на маленьком экране.