Я хочу создать серию полноэкранных ионных карт, заполненных множеством объектов

Question

Я хочу перебрать массив объектов, чтобы создать серию карт FULLWIDTH (или половинной ширины с последним центрированным, если count - нечетное число).

Я создал компонент, который содержит макет карты, и перебираю массив, используя * ngFor, но размер столбца, похоже, не изменяется независимо от того, какие атрибуты я ему предоставляю или где я его размещаю (внутри или вне петля). Карты просто размер динамически в соответствии с текстом

<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>

Вы должны рассчитать ширину изогнутого элемента, потому что при изгибе элемента должен учитываться водосточный желоб. Есть несколько способов сделать это, но это самый быстрый.