Разделение списка на несколько колонок

323

28 января 2017, 11:03

Здравствуйте! Имеется достаточно длинный список, особенность которого заключается в расположении его пунктов. Они должны следовать друг за другом по вертикали, по достижении нижней границы элемента (у родителя фиксированная высота) осуществляется перенос в новую колонку и так далее.

Пробовал реализовать с помощью .column-count - не подходит. Он хоть и располагает пункты списка друг за другом по вертикали, но список разделен на три столбца с одинаковым кол-вом пунктов, а нужно чтобы первые столбцы были заполнены по высоте на все 100%.

Сомневаюсь что существует решение этой проблемы на css, но если существуют какие-то плагины, буду премного благодарен за подсказку.

.category-list { 
  list-style: none; 
  column-count: 3; 
  height: 100px; 
  border: 1px solid red; 
} 
.category-list li { 
  page-break-inside: avoid; 
  break-inside: avoid; 
}

<ul class="category-list clearfix"> 
  <li class="category-item">1</li> 
  <li class="category-item">2</li> 
  <li class="category-item">3</li> 
  <li class="category-item">4</li> 
  <li class="category-item">5</li> 
  <li class="category-item">6</li> 
  <li class="category-item">7</li> 
  <li class="category-item">8</li> 
  <li class="category-item">9</li> 
  <li class="category-item">10</li> 
  <li class="category-item">11</li> 
  <li class="category-item">12</li> 
</ul>

Answer 1

Используйте display: flex;

Вот полная документация: http://frontender.info/a-guide-to-flexbox/

.category-list { 
  list-style: none; 
  height: 100px; 
  border: 1px solid red; 
  display: flex; 
  flex-direction: column;  
  flex-wrap: wrap 
} 
.category-list li { 
  page-break-inside: avoid; 
  break-inside: avoid; 
}

<ul class="category-list clearfix"> 
  <li class="category-item">1</li> 
  <li class="category-item">2</li> 
  <li class="category-item">3</li> 
  <li class="category-item">4</li> 
  <li class="category-item">5</li> 
  <li class="category-item">6</li> 
  <li class="category-item">7</li> 
  <li class="category-item">8</li> 
  <li class="category-item">9</li> 
  <li class="category-item">10</li> 
  <li class="category-item">11</li> 
  <li class="category-item">12</li> 
</ul>