如何在 Ionic 2 中获得响应式网格布局

Question

目前还不清楚如何在 Ionic 2 中创建响应式布局网格。我希望有人能阐明这个主题。

我得到了一个grid：

<ion-content class="home card-background-page" padding>
  <ion-row wrap>
    <ion-col>
      <ion-card *ngFor="let location of dataService.allLocationDetail.location | keys" (click)="openPage(location.data.locationId)">
        <img [src]="location.data.coverArt"/>
        <div class="card-title">{{location.data.name}}</div>
        <div class="card-subtitle">{{location.data.date}}</div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>

我希望 ion-col 的最大宽度为 500px。然后，如果视图大于 500px，就像在 iPad 景观中一样，我想要 col wrap - 2 col 排成一行并且它们居中对齐。我将 wrap 属性添加到该行，但它似乎不起作用。

另外，Ionic2有响应式网格吗？如果是这样，我该如何使用它？我还希望 ion-content 具有最大宽度，并在屏幕宽度大于最大宽度时对齐中心。现在，离子含量是绝对位置，不允许居中。

使用 Ionic 2 进行响应式布局的最佳策略是什么？

Answer 1

@Hugh Hou：我找到了一个很有趣的答案。似乎 ionic 2 缺少一些有关响应式网格的文档。

对于 ionic 1 响应式网格，您还应该参考以下 link。 here

所以总而言之，要实现您的目标。

在移动设备中，每个列都显示为全角。
在平板设备中连续显示 2 个或更多列。

尝试这样做

<ion-content class="home card-background-page" padding>
  <ion-row responsive-sm>      
    <ion-col>
      <ion-card *ngFor="let location of dataService.allLocationDetail.location | keys" (click)="openPage(location.data.locationId)">
        <img [src]="location.data.coverArt"/>
        <div class="card-title">{{location.data.name}}</div>
        <div class="card-subtitle">{{location.data.date}}</div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>

Answer 2

现在 Ionic 正在使用 Bootstrap grid system。我们可以使用 ion-grid 上的 fixed 属性轻松地做到这一点。

如何在 Ionic 2 中获得响应式网格布局

How to get a responsive grid layout in Ionic 2

flexbox

responsive-design

ionic-framework

ionic2