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

【问题标题】：How to get a responsive grid layout in Ionic 2如何在 Ionic 2 中获得响应式网格布局
【发布时间】：2016-11-23 01:56:47
【问题描述】：

目前还不清楚如何在 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 的最大宽度为 500 像素。然后，如果视图大于 500 像素（如 iPad 横向），我想要 col wrap - 2 col 连续并且它们居中对齐。我在行上添加了 wrap 属性，但它似乎不起作用。

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

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

【问题讨论】：

标签： ionic-framework responsive-design flexbox ionic2

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

您还应该参考以下链接以了解 ionic 1 响应式网格。 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>

【讨论】：