我想创建一系列通过对象数组填充的全角离子卡

Question

我想遍历一个对象数组，以创建一系列全角(如果计数是奇数，则最后一个卡居中为半角(。

我创建了一个包含卡片布局的组件，并且正在使用 *ngFor 遍历数组，但无论我输入什么属性或放置它的位置(在循环内或外(，col 大小似乎都不会受到影响。卡片只是根据文本动态调整大小

<ion-row>
  <app-artist-view *ngFor="let deal of loadedEvent.deals" [deal]='deal'></app-artist-view>
</ion-row>

<ion-col size = "12"> 
  <ion-card>
    <ion-item>
      <ion-label  class="ion-text-center">{{deal.title}}</ion-label>
    </ion-item>

    <ion-card-content class="ion-text-center">
      <ion-card-subtitle>Name: {{deal.talent.name}}</ion-card-subtitle>
      <ion-card-subtitle>{{deal.performanceType}}</ion-card-subtitle>
      <ion-card-subtitle>Length: {{deal.performanceLength}}</ion-card-subtitle>
      <ion-card-subtitle>Status: {{deal.status}}</ion-card-subtitle>
      <ion-card-subtitle>Value: {{deal.value}}</ion-card-subtitle>
    </ion-card-content>
  </ion-card>
</ion-col>  

卡片的大小根据文本动态调整，而不是为每个组件保持全角

Answer 1

使用弹性拳击：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}
.item {
  box-sizing: border-box;
  padding: 12px;
  height: 64px;
  flex: 0 0 calc(50% - 24px);
  background: coral;
  border: 1px solid teal;
  margin: 12px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

您必须计算弯曲元素的宽度，因为在弯曲元素时必须考虑装订线。有几种方法可以做到这一点，但这是最快的一种。