Question

当前行为：插入的卡片元素（下例中的第二张和第三张卡片）在折成一列时会垂直重叠。

期望的行为：当Angular Flex布局将卡片折叠为单列时，卡片元素之间的垂直间距相等。

当前的宽屏视图（行中的卡片）：

当前窄视图（列中的卡片）：

所需的窄视图：即第二张和第三张卡之间的间隙（从上到下读取）

（外部）reels.component.html

<div fxLayout="row" fxLayoutGap fxLayout.xs="column" fxLayoutAlign="center">
  <mat-card id="create-reel-card" fxFlex="33.3333vw" fxFlexFill (click)="createReel()" class="flex-item widgetReel mat-card">
    <mat-card-content class="layout-stretch-between layout-row">
      <mat-icon class="widget-icon">add_circle_outline</mat-icon>
      <br/>
      <p class="add">Add</p>
    </mat-card-content>
  </mat-card>

  <div fxFlex="33.3333vw" *ngFor='let reel of allReels; let rowIndex = index'>
      <app-widget-card fxFlexFill (outputEvent)="onComponentChange($event)" redirectLink="/view/{{reel.viewCode}}" thumbnail="{{reel.thumbUrl}}"
      name="{{reel.name}}" reelId="{{reel.id}}" viewCode="{{reel.viewCode}}" description="{{reel.description}}" count="{{reel.highlightCount}}"
      colourBackground="colourIndex(rowIndex)"></app-widget-card>
  </div>

</div>

<div *ngIf="allReels.length == 0">
  <p class="error">Either there is a network issue or you haven't created any Highlight Reels yet. Use the <a href="/editor">Editor</a> to create a Highlight Reel.</p>
</div>

（内部）widget-card.component.html

<mat-card class="flex-item widgetReel mat-elevation-z4" [ngStyle]="{'background-color': style, 'color': textStyle}">
  <mat-card-content class="layout-stretch-between layout-row">
    <div id="container">
      <div id="top">
        <div class="flex-item">
          <img id="{{name}}-thumb" class="widgetReel-thumbnail" src="{{thumbnail}}" alt="{{description}}" (click)="editReel(reelId)"/>
          <div id="action-icons">
            <div matTooltip="Delete Reel" class="actions">
              <mat-icon id="{{name}}-delete" (click)="deleteReel(viewCode)">delete</mat-icon>
            </div>
            <div matTooltip="Edit Reel" class="actions">
              <mat-icon id="{{name}}-edit" (click)="editReel(reelId)">edit</mat-icon>
            </div>
            <div matTooltip="View Reel" class="actions">
              <mat-icon id="{{name}}-view" (click)="viewReel(viewCode)">visibility</mat-icon>
            </div>
          </div>
        </div>
      </div>
      <div id="bottom">
        <p [ngStyle]="{'background-color': style, 'color': textStyle}" class="name">{{name}}</p>
      </div>
      <p [ngStyle]="{'background-color': style, 'color': textStyle}" class="count">{{count}} videos</p>
    </div>
  </mat-card-content>
</mat-card>

reels.component.scss

#create-reel-card {
  height: 50vh;
  padding: 12px;
  cursor: pointer;
  margin: 0.5vw;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.overflow-scroll {
  overflow-x: scroll;
}

p {
  white-space: nowrap;
  width: 180px; 
  overflow: hidden;
  -o-text-overflow: ellipsis; 
  text-overflow: ellipsis; 
}

p.add {
  font-size: 20px !important;
  margin-left: 20px;
  min-width: 30px;
}

.error {
  width: 80%;
  color: grey;
  padding: 20px;
}

.widget-icon {
  font-size: 20px;
}

widget-card.component.scss

mat-card {
  padding: 12px;
  height: 50vh;
  margin: 0.5vw;
}

div.top {
  float: left;
  display: block;
}

.widgetReel-thumbnail {
  float: left;
  max-width: 50px;
  max-height: 37.5px;
}

.material-icons {
  font-size: 16px;
}

.actions {
  cursor: pointer;
  float: right;
  width: 15px;
  margin: 5px;
}

div.bottom {
  display: block;
}

p {
  white-space: nowrap;
  width: 180px;
  overflow: hidden; 
  -o-text-overflow: ellipsis; 
  text-overflow: ellipsis;
}

p.name {
  margin-top: 10px;
  float: left;
  width: 180px;
  font: 16px "Open Sans", sans-serif;
}

p.count {
  float: left;
  width: 100px;
  color: grey !important;
  font: 16px "Open Sans", sans-serif;
}

使用Angular Flex布局时，插入的元素在列内垂直重叠

0 个答案: