离子网格垂直滚动只有一行答案

【问题标题】：ionic grid vertical scrolling with only one row离子网格垂直滚动只有一行
【发布时间】：2020-04-16 18:00:54
【问题描述】：

我正在构建一个响应式网格，其中 N 列都在一行中。它们位于单行的原因是，每行的列数取决于屏幕宽度（类似于引导响应网格）。我有从服务器获取的图像列表，并将它们显示在网格内的每一列中。这是代码

 <ion-grid>
    <ion-row *ngIf="data && data.length > 0">
       <ion-col size="6" size-md="4" size-lg="3" class="grid-box"  *ngFor="let d of data">
        <div class="dummy-square"></div> 
        <img [src]="d" >
     </ion-col>
    </ion-row>
 </ion-grid>

现在的问题是，因为它只有一行，

如果我只有几个项目，那么项目将垂直居中而不是像这样的顶部

我需要的是这个

如果我的项目多于我可以在屏幕中容纳的项目，则整行垂直居中，因此前几个项目不在屏幕上，而不是像这样停靠在顶部

但我想要的是这个

我的感觉是这都是因为单排，但我可能是错的。任何人都可以提出任何解决方案。

谢谢

【问题讨论】：

您使用的是哪个离子版本？您不应该将src 属性与ion-col 一起使用，因为它不存在：使用ion-img 代替渲染图像，或者如果您尝试超链接其他内容，请使用角度的routerLink
我正在使用 Ionic 5，抱歉这是我的代码错误，已修复。我只是在 ion-col 中显示图像而不是链接。

标签： css ionic-framework ionic2 ionic3 ionic4

【解决方案1】：

终于找到问题了，我的 ion-grid 被包裹在一个容器中并应用了以下样式

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

删除这些就修复了

【讨论】：