Html CSS-如何从上到下而不是从左到右对内联块进行垂直排序？

我使用

display:inline block

将一组div显示在5列中

我希望它们像这样堆叠：

1 5
2 6
3 7
4 8

而不是：

1 2
3 4
5 6
7 8

到目前为止，我所拥有的：

#父级{
宽度：1200px；
}
.有孩子{
显示：内联块；
宽度：200px；
左边距：5px；
边缘顶部：5px；
垂直对齐：顶部；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

您可以使用以下方法执行此操作：

基本上，您可以使用

flex-direction:column

垂直堆叠元素，并使用

flex-wrap:wrap

+

height:100vh

在没有更多垂直空间时使元素缠绕

然后可以使用和更改它们在两个轴上对齐的方式

如果希望始终具有相同的列数（在本例中为5），但不希望使用，则需要在项目上设置

宽度：20%

，然后，假设它们都具有相同的

高度

，使用JavaScript设置父级的

高度

，以匹配：

const parent=document.getElementById（'parent'）；
const items=parent.children；
const rows=Math.ceil（items.length/5）；
parent.style.height=`${items[0].offsetHeight*rows}px`
正文{
保证金：0；
字体系列：monospace；
}
#母公司{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
底部边框：2件纯黑；
}
.有孩子{
宽度：20%；
填充：4px8px；
框大小：边框框；
/*始终将文本保持在一行中：*/
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}
.withchild:悬停{
背景：黄色；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Try with CSS column count Property:。尝试了CSS column count，但似乎不是所有浏览器都支持它，在safari上效果不好。这样不行，我需要5列，因为这是用于动态导航菜单，项目会有所不同，我无法给出定义的高度：100vh@乔看一下更新的答案。要使用Flexbox实现这一点，您需要使用JavaScript设置父对象的
高度。或者，
列计数
在使用供应商前缀的现代浏览器中有很好的支持，但这取决于您需要支持的浏览器和版本。这似乎是目前为止最好的选择。。。我该如何做Flexbox和JavaScript回退？每个版本都需要单独的类，并根据是否支持
列计数
应用一个或另一个。以下是如何检查是否支持CSS属性：
.parent {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
}