内容填充第一列然后换行到下一列

Mem*_*335 3 css sass angular-flex-layout angular

我正在创建一个包含 3 列的新页面布局。我希望我的内容由几个不同的元素组成,填充第一列的可用高度,然后换行到下一列,依此类推。用户可以根据需要添加元素。

我正在使用 Angular 7 和 Flex-Layout。我查看了https://tburleson-layouts-demos.firebaseapp.com/#/docs但这些都与我的问题不相似。

我还查看了: -使用 CSS 自动流动 2 列文本 -让网格容器填充列而不是行

无济于事。

CSS 列布局将我的内容平均分成 3 列。它在换行之前不会填充第一列。

我希望它填充第一列,然后填充第二列,最后填充第三列。这是否可以通过 flex 或 CSS 网格/列来实现并不重要

Mem*_*335 5

我设法解决了它。

父div上的这两行css:

column-count: 3; column-fill: auto;

所有子元素现在先自动填充列,然后换行