是否可以停止 flex-flow: column wrap: 在击中 4 列之后？答案

【问题标题】：Is there away to stop flex-flow: column wrap: after hitting 4 columns?是否可以停止 flex-flow: column wrap: 在击中 4 列之后？
【发布时间】：2019-07-25 14:22:44
【问题描述】：

我有一个名称列表，我希望名称填充一列，如果名称填充第一列（这是浏览器的高度），我希望溢出开始填充第二个然后第三个等。我使用 flex-flow: 列换行；为达到这个。棘手的部分是我如何停在 4 列？

我试过 column-count: 4;并给包装器一个宽度，但这些都不起作用

html 
<div class="wrapper">
    <div *ngFor="let foo of FooBar"></div
</div>
.wrapper{
    column-count: 4;
    margin-top: 0px;
    height: calc(100vh - 250px);
    display: flex;
    flex-flow: column wrap;
    overflow-y: scroll;
}

【问题讨论】：

:nth-child(4n) { flex-basis: 100%; }
如果超过 4 列，您希望发生什么？你的 html 是什么样的？
列数与flexbox无关
如果名称多于 4 列会发生什么
如果第 4 列填满，包装器的高度会增加，这就是他们希望它的工作方式：\

标签： html css

【解决方案1】：

这样做：

<div class="wrapper">
    <div class="foo" *ngFor="let foo of FooBar"></div
</div>
.wrapper{
    column-count: 4;
    margin-top: 0px;
    height: calc(100vh - 250px);
    display: flex;
    flex-flow: column wrap;
    overflow-y: scroll;
}
.foo {
  max-width: 25%;
}

【讨论】：