CSS-столбцы, которые автоматически перемещают переполненный контент - PullRequest
Новая
       7

CSS-столбцы, которые автоматически перемещают переполненный контент

0 голосов
/ 31 мая 2018

В элементе ul возможно ли автоматическое перемещение элементов списка вправо при переполнении?Например, скажем, что есть неупорядоченный список с высотой 300px.Общая высота (границы + отступы + поля) элемента списка составляет 60 пикселей.Если есть, скажем, 4 элемента списка, они перечислены сверху вниз.Но возможно ли сделать так, чтобы дополнительные элементы списка начинались с нового столбца?Например, если их было шесть, поместите один в новый столбец справа?Я попытался исследовать это и ничего не нашел.Может быть, это связано с display?

1 Ответ

0 голосов
/ 31 мая 2018

Вы можете определить ul как гибкий контейнер с настройками, показанными ниже 

ul {
  max-height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  box-sizing: border-box;
  flex-grow: 0;
  height: 60px;
  border: 1px solid #ddd;
}
<ul>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
</ul>
...