如何使用Angular Flex Layout调整两个表单字段的长度与间距

问题原因 #

你当前使用的fxLayoutAlign="space-between center"配置中，space-between规则会将容器内的全部剩余空白分配到元素之间，自然会出现两个表单字段分别靠在容器两端、间距过大的效果。

具体修改方案 #

你只需要调整外层容器的Flex配置，同时给表单字段设置弹性宽度即可，修改点如下：

• 给外层div新增fxLayout="row"，显式声明水平弹性布局
• 将fxLayoutAlign的第一个参数从space-between改为start，让元素从左到右自然排列
• 新增fxLayoutGap属性，自定义两个字段之间的固定间距
• 给每个mat-form-field添加fxFlex属性，让两个字段均分容器宽度，也可以根据需求指定固定比例

修改后完整代码 #

<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
    <mat-form-field appearance="fill" fxFlex>
        <mat-label>Start Date</mat-label>
        <input 
          matInput
          [(ngModel)]="dealPMRFormFields.dealName"
          [required]="isExistingDeal">
    </mat-form-field>
    <mat-form-field appearance="fill" fxFlex>
        <mat-label>End Date</mat-label>
        <input 
          matInput
          [(ngModel)]="dealPMRFormFields.dealName"
          [required]="isExistingDeal">
    </mat-form-field>
</div>

可选优化 #

如果不想让字段在宽屏容器下拉伸过长，可以给mat-form-field设置最大宽度，比如用fxFlex="0 1 240px"限制最大宽度为240px，或者直接加style="max-width: 240px"即可。

内容的提问来源于stack exchange，提问作者Ananya Amar