角度弹性布局调整

Question

我们如何使用 flex 布局调整 2 个字段的长度？ .现在，正如您在第一个屏幕截图中看到的那样，两个字段彼此相距很远，我想在第二个屏幕截图中保持相同，使用 flex 布局的技术是什么>？谢谢。

#html代码

 <div fxLayoutAlign="space-between center" >
            <mat-form-field appearance="fill">
                <mat-label>Start Date</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPMRFormFields.dealName"
                  [required]="isExistingDeal">
              </mat-form-field>
              <mat-form-field appearance="fill">
                <mat-label>End Date</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPMRFormFields.dealName"
                  [required]="isExistingDeal">
              </mat-form-field>
          </div>
         

Answer 1

您可以执行以下操作

<div fxLayoutAlign="space-between center">
  <div class="item" fxFlex="50">Hello</div>
  <div class="item" fxFlex="50">World</div>
</div>

使用fxFlex 指令，您可以将空间的某些部分分配给选定的元素。