Как заставить flexbox прижиматься выше?

Question

[danforth]

Есть такое меню: prntscr.com/e6zkt2
У родителя задано:

display: flex;
flex-wrap: wrap;

Пробовал делать flex-direction: column и все отлично, но вот есть меню, где пунктов мало, и вместо того, чтобы расположиться горизонтально и не вытягивать меню по вертикали, все пункты вываливаются в столбик, и растягивают меню. prntscr.com/e6zqqb

Сам вопрос на картинке: как поднять элементы вверх?

Или если я вообще не правильно делаю: без bootstrap и flexbox можно сделать адаптивную сетку из пунктов меню, которые будут "пушиться" вверх? Если да, то как, дайте наводку.

P.S. Под адаптивностью я понимаю нечто для планшетов и десктопов, мобильное меню уже отверстано.

Answer 1

[Alexander Pushkarev]

Задавайте column-count

-moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;

Comments

[danforth]

У родителя? Почему-то не работает данный способ. Да и суть в том, чтобы количество колонок адаптивно было, т.е. ширина одного элемента level2 (те, что на первом скриншоте) - 240px, таким образом заполняется по максимуму меню, а если сделать меню Уже, то элементы level2 уйдут вниз. При этом, если всего элементов 2-3 штуки, то они просто в рядок выводились. Короче, алгоритм таков:
1) выводим элементы в строчку
2) если новая строка, то выводим в строчку и каждый элемент должен располагаться относительно того элемента, который находится над ним, и если высота этого элемента не большая, то наш текущий элемент поднимается выше до элемента, находящегося над ним. (поведение подобное колоночному).

[Alexander Pushkarev]

danforth: можно вот так codepen.io/AXP/pen/VPVbxy

[danforth]

AXP-dev: да, все работает благодаря max-height: n px; но если бы не это правило, все бы вывалилось в столбик. Я не могу в ручную прописать ограничение на высоту, так как меню часто редактируется. Добавляются и перемещаются новые категории. Нужно некое подобие адаптива.

[Alexander Pushkarev]

danforth: а что останавливает сложить все высоты меню и поделить на 3? И добавить max-height к родителю?

[danforth]

AXP-dev: Почему именно на 3 делить, и почему складывать? Нужно-же самый наибольший найти? Например, если у нас 3 пункта: 100, 200 и 300 пикселей в высоту, то сложив их и поделив на 3, мы получим 200. max-height: 200 и наш элемент с подкатегориями уже не влазит. Тут надо максимальный высчитывать. Вариант на js имеет место быть, но неужели нельзя как-то на css тактично разрулить это дело? Может даже флотами какими-то, или display-inline?

[Alexander Pushkarev]

danforth: float поможет в этом. Я совершил просчёт в формуле, когда писал не об этом думал :)

Answer 2

[Егор Живагин]

align-items: flex-start; - выравнивание по второстепенной оси. По умолчанию растягивает на всю ось (stretch)

UPD - flex-start для случая с flex-direction: row; А вообще, поиграйтесь им и justify-content
Тут шпаргалка - тут

Comments

[danforth]

Да, я пробовал. Проблема в том, что на большом количестве элементов меню, мне подходит flex-direction: column, а на маленьком - row. Но нужно какой-то промежуточный вариант, если он есть, конечно.

Answer 3

[Владимир]

Сомневаюсь что флексы такое умеют. Возможно частично решить эту проблему колонками, но возникает вопрос с переносом содержимого
codepen.io/casufi/pen/YNRQGR
frontender.info/a-guide-to-flexbox
https://habrahabr.ru/post/153925/