javascript - 具有环绕和响应能力的 Angular cdk虚拟滚动

我正在查看cdk-virtual-scroll，并希望可以在现有应用程序中使用它，在该应用程序中，我有一个包含项目的 View ，其宽度取决于屏幕尺寸(例如手机与平板电脑等)

fork this example，我有一个modified version here。

我的修改是在App/cdk-virtual-scroll-overview-example.css上，我在其中将css更改为包含以下内容。

.example-viewport {
      height: 200px;
      width: 90%;
      border: 1px solid black;
      display: flex;
      flex-direction:  row;
      flex-wrap:  wrap
    }

    .example-item {
      height: 50px;
      background: red;
      margin:0.5px;
      width: 33%
    }

      @media screen and (min-width: 360px)  {
       .example-item {
          width: 45%
         }
       }

因此，我的目标是根据屏幕尺寸使项目连续显示2或3。但是，可以看出，它们似乎根本没有包装。



我在这里使用过flex(我做错了吗？)，但是任何使其工作的css都可以做(也许是flex grid或其他)

可以使用cdk-virtual-scroll吗？

提前致谢

最佳答案

您可以通过根据所需的每行编号对项目进行分块来解决此问题，然后在虚拟滚动中添加ngFor来迭代每个分块。然后，您可以在块div上显示flex。