角分量不对齐

Question

在我的应用程序中，我有一个选项卡。在此选项卡中，有一个下拉列表和一个按钮。我想对齐这两个组件，同时对齐下拉到开始和按钮结束。我已经在我的代码中尝试过这种方法，正如您所看到的，它们仍然没有对齐。另外，我也不能水平拉伸下拉，它停留在像下面的图像。我应该怎么做才能实现我想要的？

​

​

代码：

<div fxLayout.gt-xs="row" fxLayoutAlign="space-between end" fxLayout="column" class="m-8 mb-16">
    <div fxLayout="column" class="mt-16 mr-8" fxLayoutAlign="start center">
        <mat-form-field appearance="outline" fxFlex fxFlex.gt-sm="100" class="pr-4">
            <mat-label>Şube Kodu Seçimi</mat-label>
            <mat-select [(ngModel)]="this._materialPlan.StockBranch" name="StockBranch">
                <mat-option *ngFor="let dp of branchList" [value]="dp">
                    {{dp.BranchName}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div fxLayout="column" class="mt-16 mr-8" fxLayoutAlign="end center" style="margin-top: 200px;">
            <button mat-stroked-button [ngClass]="{'purple-fg': EditIndex==undefined}" [disabled]="EditIndex!=undefined"
            (click)="openProductSelectionDialog(); workItemForm.reset();">
            Yeni Ürün
        </button>
    </div>
</div>

Answer 1

您可以使用Flexbox轻松地解决这个问题。

.m-8 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

我建议添加适当的类名，而不是使用m-8，它可能是一个框架类？