定义带角度伸缩布局的换行线

Question

当前，我只是在多行上显示div。

我需要在div上显示一行，直到它达到60号，当它达到该大小时，下一个div将在新行上显示。

我可以在一行中显示3格或更多格，直到达到60号。

我需要使用fxLayout.xs来执行此操作，以知道何时仅在忽略大小60的下一行上显示。

下面我有一个代码，它仅以行显示。

component.html：

    <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start">
        <mat-form-field fxFlex="30" [floatLabel]="true">
            <mat-label> Field 1</mat-label>
            <input matInput name="field1" placeholder="Field 1">
        </mat-form-field>

        <mat-form-field fxFlex="30" [floatLabel]="true">
            <mat-label>Field 2</mat-label>
            <input matInput name="field2" placeholder="Field 2">
        </mat-form-field>
    </div>


    <div class="h3 blue-fg">
       Select options?
    </div>

    <div fxLayout="column" fxLayout.xs="column" fxLayoutAlign="start start">
        <mat-checkbox>Checkbox 1</mat-checkbox>
        <mat-checkbox>Checkbox 2</mat-checkbox>
        <mat-checkbox>Checkbox 3</mat-checkbox>
        <mat-checkbox>Checkbox 4</mat-checkbox>
        <mat-checkbox>Checkbox 5</mat-checkbox>
    </div>