Angular 材质，Flex 对齐右键答案

【问题标题】：Angular Material, Flex align right buttonAngular 材质，Flex 对齐右键
【发布时间】：2020-06-22 16:53:13
【问题描述】：

我有这个代码：

<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 内部对齐？

目前是这样显示的：

我想要这样：

【问题讨论】：

看起来您只需要将容器的宽度定义为 100%，但我没有使用角材料的经验

标签： flexbox angular-material angular8

【解决方案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 example

【讨论】：