Как сделать компактно с display: flex?

Question

[ART4]

Как сделать компактно меню в каталоге
Сейчас:

Хочу сделать:

Кто как бы сделал: Цель такая, если нету подразделов у категории, тогда приклеивается вверх. Не было пространства, если нет подкатегорий.
В данный момент я сделал:
css контейнер:

div{
   display: flex;
    flex-wrap: wrap;
}

А деткам css:

width: 33.333%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;

Сама структура:

<div>
  <ul>

   <li>Category
     <ul>
      <li>название подкатегории</li>
      <li>название подкатегории</li>
      <li>название подкатегории</li>
    </ul>
   </li>

   <li>Category </li>

  </ul>
</div>

Comments

[Rustam Bainazarov]

Column-count.

Answer 1

[Юрий]

На флексе никак, это многоколоночный макет. В вашем случае column-count: 3.

Comments

[ART4]

Можете подкинуть пример, костыль пожалуйста

Answer 2

[Арсений Матыцин]

Можно прибегнуть к masonry, ведь это именно такая раскладка. Или к многоколоночному тексту в сопровождении танцев с бубном.

Comments

[ART4]

Велик изобретать с флексом?)