Defining line break line with angular flex-layout

Question

Currently I'm just displaying the divs on multiple lines.

I need to display divs on a single line until it reaches size 60, when it reaches that size the next div will be on a new line.

I can 3 divs or more in a single line until I reach size 60.

I need to do this using fxLayout.xs to know when to display only on the next line ignoring size 60.

Below I have a code where it is only displayed in lines.

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>

victorperezpiqueras victorperezpiqueras · Accepted Answer · 2021-12-14T12:04:55

I think what you are looking for is this:

 <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>

Take a look at this code: stackblitz-demo.

You can use FlexLayout mediaqueries breakpoints flexlayout-responsive-api to select different layouts depending on screen size. Given your schema, the layout that I think best fits is the "fxLayout=row wrap", starting with screens larger than "xs". This way, when the screen is larger than "xs" your interface will switch from a column to a wrapped row.

Defining line break line with angular flex-layout

1 Answers