我想创建一个多列列表，如下所示: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布局？
是的，如果您将UL设置为flex容器，将Flex-Direction更改为column，通过应用Flex-Wrap:wrap允许它换行，并通过限制它的高度强制它换行，则可以按照所述创建多列列表:
null
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>
考虑使用CSS3多列布局:
CSS3多列
您可以只使用一个列表来完成此操作，并用CSS定义列数。 如果您在这里检查CSS3多列布局浏览器支持，您可以看到大多数浏览器部分支持，因为它们不支持break-before，break-after和break-inside属性。 但它们确实支持创建带有前缀的多列列表所需的属性。
null
.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>