Мобильная версияВ прилагаемом коде есть гибкий элемент div, который должен отображать 2 элемента на маленьком экране, 3 на среднем и 4 на большом экране.
В демо-версии 8 элементов, поэтому сетка будет такой:
[*]
Большой экран: 2 строки * 4 элемента = 8 (ОК)
[*]
Маленький экран: 4 строки * 2 элемента = 8 (ОК)
[*]
Средний экран: 2 строки * 3 элемента = 6, 3-й ряд = 2 элемента (здесь и возникает проблема)
На среднем экране 2 элемента остаются в третьей строке, а в третьей строке эти 2 элемента растягиваются до ширины 3 элементов.
ПРИМЕЧАНИЕ:
[*]
Этот фрагмент представляет собой описание проблемы, с которой я столкнулся в своем приложении React + Tailwind.
[*]
В моем реальном коде динамическое количество элементов передается и отображается внутри flex div, но приведенный выше код демонстрирует мою точную проблему.
[*]
Я использовал свойство flex-grow, чтобы карточка увеличивалась/сжималась в ответ при изменении размера экрана до достижения точки останова.
Что я уже пробовал и какие проблемы возникли
[*]
Удаление flex-grow: при удалении справа появляется пустое пространство, оно мне не нужно.
[*]
Удаление flex-grow для каждого элемента в гибком элементе и добавление justify-center в гибком контейнере. Это добавляет разрыв между столбцами.
[*]
Добавление flex-grow к каждому гибкому элементу, по-видимому, решает две вышеуказанные проблемы, создавая третью проблему (о которой я упоминал выше).
1 2 3 4 5 6 7 8
