Angular / Flex: настройка максимальной ширины компонента - PullRequest
Новая
       16

Angular / Flex: настройка максимальной ширины компонента

0 голосов
/ 17 апреля 2019

Я пытаюсь создать что-то вроде reddit-clone, который показывает сообщения и их содержимое, но если содержимое длиннее определенной ширины, оно должно разбиться и начать с новой строки.По какой-то причине я не могу заставить работать максимальную ширину.Ширина mat-card совпадает со свойством body сообщения.

Насколько я знаю, мне следует изменить некоторые значения в fxFlex, я пробовал это, но все равно не работает.

Сообщение 

<code><mat-card>
  <mat-card-header>
    <mat-card-title>
      {{ post.title }}
    </mat-card-title>
    <mat-card-subtitle>
      {{post.author}}<br>
      {{post.creationDate | date: 'dd/MM/yyyy'}}
  </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>
    {{post.body}}
  </p>
  </mat-card-content>
  <div style="text-align:right">
  <span><mat-icon>arrow_upward</mat-icon>{{post.upvotes}}</span><pre style="display: inline">
arrow_downward{{post.downvotes}}

Компонент приложения 

<app-navheader></app-navheader>
<div 
  fxLayout="column wrap"
  fxLayout.xs="column"
  fxLayoutGap="0.5%"
  fxLayoutAlign="center center"      
>
  <div 
    class="post"
    *ngFor="let p of posts"
    fxFlex="0 0 calc(25%-0.5%)"
    fxFlex.xs="100%">
    <app-post [post]="p"></app-post>
  </div>
</div>
...