Flex与Tailwind CSS双列表单行高自动拉伸对齐问题求助

问题原因 #

左右两列均为flex flex-row flex-wrap容器，父flex容器默认会让子元素（左右列）高度拉伸对齐（align-items: stretch）。右侧列仅有2行表单组，容器被拉伸至与左侧3行等高后，align-content: stretch（flex-wrap默认垂直对齐方式）会将内部两个表单组行拉伸，导致第二行被推至容器底部，与左侧第三行错位。

解决方案 #

给右侧列容器添加align-content-start类，让内部表单组行顶部对齐，不被拉伸填满容器高度；同时补全右侧第一个表单组的w-full类，保证小屏幕下布局正常。

修改后的代码 #

<div class="w-full flex flex-row flex-wrap">
    <!-- 左侧列 -->
    <div class="w-full flex flex-row flex-wrap md:w-1/2 p-2">
        <div class="flex flex-wrap w-full -mx-2">
            <div class="md:w-1/2 w-full px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
                    <mat-label>First Name</mat-label>
                    <input matInput />
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('memberFirstName').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
            <div class="md:w-1/2 w-full px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
                    <mat-label>Last Name</mat-label>
                    <input matInput />
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
        </div>
        <div class="flex flex-wrap w-full -mx-2">
            <div class="md:w-1/2 w-full px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
                    <mat-label>Address1</mat-label>
                    <input matInput />
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('address1').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
            <div class="md:w-1/2 w-full px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
                    <mat-label>Address2</mat-label>
                    <input matInput />
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('address2').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
        </div>
        <div class="flex flex-wrap w-full -mx-2">
            <div class="md:w-1/2 w-full px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
                    <mat-label>City</mat-label>
                    <input matInput />
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('city').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
            <div class="md:w-1/2 w-full px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="fuse-mat-dense w-full">
                    <mat-label>PostCode</mat-label>
                    <input matInput />
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('postcode').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
        </div>
    </div>
    <!-- 右侧列（修改部分） -->
    <div class="w-full flex flex-row flex-wrap align-content-start md:w-1/2 p-2">
        <div class="flex flex-wrap w-full -mx-2">
            <!-- 补全w-full类 -->
            <div class="md:w-1/2 w-full px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
                    <mat-label>Membership Number</mat-label>
                    <input matInput />
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
            <div class="md:w-1/2 w-full px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
                    <mat-label>Joining Date</mat-label>
                    <input matInput />
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
        </div>
        <div class="flex flex-wrap w-full -mx-2">
            <div class="md:w-1/2 px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
                    <mat-label>Gender</mat-label>
                    <mat-select>
                        <mat-option value="select1-1">Male</mat-option>
                        <mat-option value="select1-2">Female</mat-option>
                    </mat-select>
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:map-pin'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('gender').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
            <div class="md:w-1/2 w-full px-2">
                <mat-form-field [ngClass]="formFieldHelpers" class="w-full fuse-mat-dense">
                    <mat-label>Date of Birth</mat-label>
                    <input matInput />
                    <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                    <mat-error *ngIf="membershipForm.get('memberLastName').invalid"> Required </mat-error>
                </mat-form-field>
            </div>
        </div>
    </div>
</div>

说明 #

• align-content-start：让flex-wrap布局下的行顶部对齐，避免被拉伸填满容器高度，解决第二组表单被推到底部的问题。
• 补全w-full：保证小屏幕（md以下）时表单组占满宽度，避免布局错乱。

内容的提问来源于stack exchange，提问作者Sandeep Thomas