使用角度 flex-layout 定义换行符

Question

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

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

我可以在一行中包含 3 个或更多 div，直到尺寸达到 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>

Answer 1

我认为您正在寻找的是：

 <div fxLayout.gt-xs="row wrap" fxLayout.xs="column" fxLayoutAlign="start start" fxLayoutGap="10px">
        <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>

看看这段代码：stackblitz-demo。

您可以使用 FlexLayout 媒体查询断点flexlayout-responsive-api 来 根据屏幕尺寸选择不同的布局。鉴于您的架构，我认为最适合的布局是"fxLayout=row wrap"，从大于"xs" 的屏幕开始。这样，当屏幕大于"xs" 时，您的界面将从列切换到换行。