四个元素牢固地分布在3列容器中-CSS列

Question

我有一个有趣的问题。当我有以下代码（代码段）

我看到了：

我想看看：

这似乎只有在我有四个项目，三个项目占据三列，而五个也同时填写所有三列时才发生。

是否可以使用CSS列？有希望吗，或者这是CSS列总是要做什么？

我会考虑使用flexbox或float，但是有一个要求，即显示的项目应按顺序排列：

1 4 7
2 5 8
3 6 9

ul {
    column-count: 3;
    column-gap: 30px;
}
li {
    background: lightblue 
}

<ul>
<li>Something 1</li>
<li>Something 2</li>
<li>Something 3</li>
<li>Something 4</li>
</ul>

Answer 1

尝试：

ul {
   display: flex;
   flex-wrap: wrap;
}

ul > * {
    flex-basis:33.3%; /*this will create 3 columns*/
}

然后，在每个子节点上使用内联css，设置其order属性。 如果您有n个元素，请申请其中的前n / 3个元素

order:<indexZeroBased*3+1> 

适用于下一个n / 3：

order:<indexZeroBased*3+2> 

其余：

order:<indexZeroBased*3+3>