Как сделать так, чтобы элемент у flex'a не брал высоту от соседнего элемента?
Добрый день, возникла такая проблемка, что при раскрытии подменю у элемента, справа появляется пустое место, из за того что высота становится равной левому элементу, думаю что это можно как то решить с помощью гридов, но что то пока безуспешно, в данном скрине сделано на флексах + flex-wrap
Заранее благодарю
Как сделать так, чтобы соседний элемент у flex'a не брал высоту от соседнего элемента?
Задать флексу align-items отличный от stretch или align-self для конкретного элемента.
Но проблему это не решит, потому что она не в высоте элемента. А в том, что строка идет ровной строкой.
Что можно сделать:
- Перерисовать меню (убрать этот лишний уровень)
- Открывать подменю абсолютом
- Разбить пункты основного меню на столбцы
- Гадкий вариант - пересчитывать высоту и использовать flex-direction: columns
- Ещё что-нибудь пересчитывать на JS (span N у гридов и т.д.)
Ankhena, Абсолютом будет не очень красиво смотреться, я думаю остановлюсь на варианте разбить эту колонку на 2 независящих друг от друга, и на бэкэнде уже пусть выводят в левый столбец четные элементы, а в правый нечетные
Да, действительно так работает, но только при условии что у нас фиксированная высота для родителя, к сожалению высоту я задать не могу, т.к. количество элементов не ограниченно, и из за придется добавлять скролл к родителю, что не очень красиво будет выглядеть
И нашел еще один нюанс, когда мы скрываем подменю, элементы которые находятся справа, начинают перестраиваться на левую колонку, думаю единственное решение будет создать 2 отдельные колонки для этих элементов, чтобы они никак не зависели друг от друга
Выход относительно простой: если есть элемент с несколькими колонками и без фиксированной высоты - брать grid вместо флексов. Проблема старая и в вашем случае любые другие решения кажутся костылями, имхо (в том числе хранить разделение на 2 колонки на бэкенде)
ForSureN1, гридами может. Но в вашем случае неизвестно на сколько частей. Точнее это нужно узнавать на JS по числу пунктов в подменю с учетом размера строки.
ForSureN1, чтобы когда открывается один какой-то пункт (пусть слева, как на скрине), он получил span N строчек. Чтобы элементы справа за счет этого поднялись наверх.
Средний
