Как создать несколько столбцов из одного неупорядоченного списка?

Я хотел бы создать список из нескольких столбцов, например: https://jsfiddle.net/37dfwf4u/

Нет проблем при использовании другого списка для каждого столбца:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

ul {
    display:inline-block;
}

Однако можно ли это сделать с помощью непрерывного списка и чистого CSS, чтобы CSS автоматически размещал столбцы? Например, используя гибкий макет, с которым я еще не знаком?

Ответ 1

Да, вы можете создать список из нескольких столбцов, как описано, если вы создадите контейнер ul flex, измените направление flex-direction на column, разрешите его обертывать, применяя flex-wrap: wrap и дополнительно заставляйте его обертывать, ограничивая его height:

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

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
</ul>

Ответ 2

Рассмотрите возможность использования многострочной компоновки CSS3 для этого:

CSS3 Несколько столбцов

Вы можете сделать это, используя только один список и определить количество столбцов с помощью CSS. Если вы проверяете Multi-колонки поддержки макет браузера CSS3 здесь вы можете увидеть частичную поддержку со стороны большинства браузеров, потому что они не поддерживают обкатки прежде, брейк-после и распада внутри свойства. Но они поддерживают свойства, необходимые для создания списка с несколькими столбцами с префиксом.

.container {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  margin: 0;
}

<div class="container">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>
</div>