Угловой материал - гибкая раскладка и карточки

У меня проблема с поведением гибкого макета в приложении на основе Angular Material. Я хочу иметь простую раскладку «карточная сетка» с 3 карточками в ряд (самые большие экраны), 2 карточками среднего размера и 1 карточкой на маленьких экранах. Проблема в том, что у меня только 1 карта в последней строке на самом большом экране, потому что ширина последней карты составляет 100% ширины экрана. Как избежать этой проблемы?

Вот мой текущий код.

<div class="page-wrapper">
  <div fxLayout="row wrap" fxLayoutGap="16px" class="align" *ngIf="!loading">
    <mat-card fxFlex.lg="calc(33% - 16px)" fxFlex.lt-lg="calc(50% - 16px)" fxFlex.xs="calc(100% - 16px)"
              *ngFor="let post of posts">
      <mat-card-header>
        <mat-card-title>{{ getCleanString(post.title.rendered) }}</mat-card-title>
        <mat-card-subtitle>{{ post.date_gmt | date }}</mat-card-subtitle>
      </mat-card-header>
      <img matCardImage [src]="post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url"
           class="card-image">
      <mat-card-content [innerHTML]="post.excerpt.rendered"></mat-card-content>
      <mat-card-actions align="start">
        <a mat-button color="primary" [href]="post.link">Czytaj więcej</a>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

Изменить: нет проблем с разрывом между картами. Проблема в том, что последняя карта имеет 100% ширину всего макета (а не 1/3, как у других).

пример:


angular angular-flex-layout angular-material-7
person Greggy    schedule 02.05.2019    source источник
comment
Как сделать так, чтобы последняя строка была видна?   -  person Prasanth    schedule 03.05.2019
comment
Я бы хотел, чтобы все карточки были одинаковой ширины, в том числе и последняя. Так, например, в случае lg - все карты должны иметь ширину 33%.   -  person Greggy    schedule 03.05.2019

Ответы (1)


arrow_upward
3
arrow_downward

Попробуйте добавить 0 0 в fxFlex.lg следующим образом: fxFlex.lg="0 1 calc(33% - 16px)".

Это уберет гибкость.

Примечание: вам нужно будет добавить margin-right: 16px; к последнему элементу, чтобы получить правильное выравнивание.

person Mendy    schedule 03.05.2019