小编bbR*_*dev的帖子

只是我的 Angular Material Form 遇到了一点 FlexLayout 格式问题。

我的名字和姓氏输入应从头到尾覆盖整行，以便姓氏输入的左端和名字输入的右端垂直于电子邮件输入的相应端。

我怎样才能让它发挥作用？基本上我只是希望它们与其他表单输入具有匹配的宽度。

它们不是匹配的“行换行”宽度，而是非常小

这是它在移动设备上的样子，同样，名字和姓氏太小

我使用 FlexLayout 和 Angular Material 组件库来实现这一切。我只是不熟悉如何以有效的方式设置弹性盒的有用部分。

以下是相关代码，在此 component.html 文件之外没有应用任何重要的样式或布局功能。

<mat-card fxLayoutAlign="center center">
    <div *ngIf="isLoading">
        <app-loading-spinner></app-loading-spinner>
    </div>
    <div *ngIf="!isLoading">
        <form [formGroup]="contactForm" fxLayout="row wrap" (ngSubmit)="onFormSubmit()">
            <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="16px">
                <mat-form-field fxFlexFill color="accent">
                    <input id="fName" matInput type="text" placeholder="Your first name" formControlName="firstName">
                </mat-form-field>
                <mat-form-field fxFlexFill color="accent">
                    <input id="lName" matInput type="text" placeholder="Your last name" formControlName="lastName">
                </mat-form-field>
            </div>

            <mat-form-field fxFlexFill color="accent">
                <input id="email" matInput type="text" placeholder="Your email" formControlName="email">
            </mat-form-field>
            <mat-form-field fxFlexFill color="accent">
                <textarea
                    matInput
                    [rows]="6" …