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?

В настоящее время показывается так:

Мне бы хотелось, чтобы это было так:

Answer 1

Зависит от ваших требований относительно того, как он должен вести себя для небольших контейнеров во время растяжения и т. Д. c. это может быть реализовано несколькими способами. Вот простое решение с использованием flex.

Сначала добавьте еще одну обертку в содержимое mat-card. Он должен содержать 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>

Затем создайте родительский гибкий контейнер, выровняйте элементы по базовой линии (чтобы они были правильно выровнены по горизонтали), выровняйте содержимое как 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