flexbox - Angular 材质，Flex 对齐右键

Question

我有这个代码：

<mat-card>
  <mat-card-header>
    <mat-card-subtitle>
      <h2>Explorador de Eventos</h2>
    </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <div>
      <mat-form-field>
        <input matInput [matDatepicker]="picker1" [(ngModel)]="filter.startDate" placeholder="Fecha inicio">
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>

      <mat-form-field>
        <input type="time" [(ngModel)]="filter.startTime" matInput placeholder="Hora inicio">
      </mat-form-field>
      <button (click)="search()" mat-raised-button class="m-1">Monitorear</button>
    </div>
  </mat-card-content>
</mat-card>

我怎样才能让那个button浮动或在里面对齐div？

目前正在以这种方式显示：

我想要这样：

标签： flexboxangular-materialangular8

Answer 1

取决于您对小型容器的行为方式、拉伸过程等方面的要求。这可以通过多种方式实现。这是使用 flex 的简单解决方案。

首先，在 mat-card-content 中添加另一个包装器。它应该包含带有字段和按钮的 div。

<mat-card>
    <mat-card-header>
        <mat-card-subtitle>
            <h2>Explorador de Eventos</h2>
        </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <div class="wrapper">
            <div class="fields-wrapper">
                <mat-form-field>
                    <input matInput [matDatepicker]="picker1" [(ngModel)]="filter.startDate" placeholder="Fecha inicio">
                    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                    <mat-datepicker #picker1></mat-datepicker>
                </mat-form-field>

                <mat-form-field>
                    <input type="time" [(ngModel)]="filter.startTime" matInput placeholder="Hora inicio">
                </mat-form-field>
            </div>
            <button (click)="search()" mat-raised-button class="m-1">Monitorear</button>
        </div>
    </mat-card-content>
</mat-card>

然后，制作父 flex 容器，将项目与基线对齐（以便它们正确水平对齐），将内容对齐space-between（以便项目分别与最左边和最右边的边框对齐）。

.wrapper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

.fields-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
}

还添加了 flex-wrap 以便为较小的显示器进行包装。

Stackblitz 示例