css - 将离子卡与 Angular 指令垂直对齐
问题描述
我正在尝试使用 Ionic 框架进行简单的卡片收集。
我正在使用 SpaceX API 来填充卡片。我的代码包括角度指令。我建立了这个:
<ion-grid>
<ion-row>
<ion-col col-4>
<ion-card *ngFor="let launch of list_launches">
<ion-card-header>
{{ launch.mission_name }}
</ion-card-header>
<ion-card-content>
<ion-thumbnail item-start>
<img src="{{launch.links.mission_patch_small}}">
</ion-thumbnail>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
这*ngFor="let launch of list_launches"
用于从对象 list_launches 中获取一些属性。
我找到了这个解决方案:
<ion-row>
<ion-col col-4>
Left
</ion-col>
<ion-col col-4>
Middle
</ion-col>
<ion-col col-4>
Right
</ion-col>
</ion-row>
但是当我使用 *ngfor 参数时,这不能正常工作。想要垂直对齐这张 Ionic 卡片。
解决方案
所以这里的问题是离子网格需要一个非通用模板来构建更复杂的网格。我总是觉得这些布局组件太过分了,因为大多数事情都可以通过几个 CSS 声明来完成。在您的情况下,我根本不会使用离子网格并将其写在CSS Grid中。两个简单的 CSS 规则可以解决这个问题:
display: grid;
grid-template-columns: 1fr 1fr 1fr;
我在这里创建了一个非常基本的网格,并告诉它它有三个相同大小的列(1fr
表示 1 个分数)。
您还可以使用该repeat
功能
display: grid;
grid-template-columns: repeat(3, 1fr);
代码也少得多:
<div style="display: grid;grid-template-columns: 1fr 1fr 1fr;">
<ion-card *ngFor="let launch of list_launches">
<ion-card-header>
{{ launch.mission_name }}
</ion-card-header>
<ion-card-content>
<ion-thumbnail item-start>
<img src="">
</ion-thumbnail>
</ion-card-content>
</ion-card>
</div>
https://stackblitz.com/edit/ionic-7qd5xf
更新:正如托马斯在评论中建议的那样,*ngFor
在自身上使用指令也足够了ion-col
:
<ion-row>
<ion-col col-4 *ngFor="let launch of list_launches" >
<ion-card >
<ion-card-header>
{{ launch.mission_name }}
</ion-card-header>
<ion-card-content>
<ion-thumbnail item-start>
<img src="">
</ion-thumbnail>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
推荐阅读
- python - 如何从 Python 中的 CSV 文件生成多个 Vcard QRCode?
- java - 查找多个时间表的共同空闲时间。仅使用列表
- windows-server-2019 - 如何在 server2019 上为 Windows 管理中心分配网关角色?
- oauth-2.0 - Google oAuth 中的客户端凭据授予
- php - 增量 (+1) Php/MongoDB - MongoDB\Driver\Manager 的 FindOneAndUpdate
- c# - 使用 Webmatrix、Bootstrap、Html 和 SQL 为 ForeignKey 保留相同 ID 的两个表插入
- python - 我无法用字典解决的python IndexError
- .net - AWS CodeBuild 中是否支持 GitVersion?
- python - xgboost 特征重要性类型“增益”是否与 MDI 相同?
- html - 在 HTML 表格中显示上下文变量