Как заставить flex-wrap сбалансировать упакованные предметы?
Я делаю адаптивный макет, и на небольших экранах боковая панель <ul> превращается в display: flex с flex-wrap: wrap, а элементы стилизованы под flex-grow: 1. Это выглядит хорошо большую часть времени:
Однако это выглядит довольно плохо, когда переполняется только пара элементов, например, на немного большем экране:
Есть ли способ заставить flex-box попытаться обернуть вещи, основываясь на сбалансированной общей ширине элемента в строке? Например, во втором примере было бы гораздо логичнее, чтобы «Люди» (и, возможно, также «Протоколы») перетекали во вторую строку.
Или есть альтернативный подход, который я должен использовать, чтобы выложить это меню?
Ответы 1
Вы можете добавить медиа-запрос, чтобы изменить поведение в небольших окнах просмотра.
Например:
@media (max-width: 768px) {
nav li {
min-width: 25%;
}
}
Таким образом, по крайней мере, у вас не будет более 4 элементов в строке на маленьком экране.
Это решение хорошо, хотя я бы предпочел, чтобы элементы могли помещаться в одну строку, если они достаточно малы, поскольку они на больших планшетах, которые достаточно узки, чтобы вызвать мобильную раскладку (которая у меня сейчас есть в max-width:800px) . Также есть другие меню, в которых больше элементов, чем это, с гораздо более разнородными длинами меток. Итак, я буду помнить об этом как о потенциальном исправлении, но я надеюсь найти что-то более общее. Спасибо!
Нет... это невозможно без медиа-запросов. Flexbox/CSS не знает и не может обнаружить перенос/переполнение.