如何从单个无序列表创建多列？

Question

我想像这样创建一个多列列表： 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 自动排列列吗？例如。通过使用我还不熟悉的 flex 布局？

Answer 1

是的，如果将 ul 设为弹性容器，将 flex-direction 更改为 column，则可以按照说明创建多列列表，并通过应用 flex-wrap: wrap 并通过限制它的 height:

来强制它换行

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

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18 </li>
  <li>item 19</li>
  <li>item 20</li>
  <li>item 21</li>
</ul>

这是另一种可能性，在@Andrew Koper 发表评论半年后添加：

您还可以使用 colummn-count 参数，它不需要固定高度（也不需要 flex），但定义了固定列数。所以在下面的例子中，即使只有两个列表项也会被分成两列，每列一个列表项：

ul {
  column-count: 2;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18 </li>
  <li>item 19</li>
  <li>item 20</li>
  <li>item 21</li>
</ul>

Answer 2

考虑为此使用 CSS3 多列布局：

CSS3 Multiple Columns

您可以只使用一个列表并使用 CSS 定义列数来做到这一点。如果你检查 CSS3 Multi-column layout browser support here 你可以看到大多数浏览器的部分支持，因为它们不支持 break-before，break-after 和 break-inside 属性。但它们确实支持创建带前缀的多列列表所需的属性。

.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>

如何从单个无序列表创建多列？

How can I create multi columns from a single unordered list?

css

html-lists

flexbox

css-multicolumn-layout