Angular flex-layout next element from the new line

Question

I have such layout:

<div fxLayout="row" fxFlex fxLayoutAlign="start center" fxLayoutGap="10px">
    <mat-form-field fxFlex="30">
      <input matInput [matDatepicker]="datePickerFrom" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [for]="datePickerFrom"></mat-datepicker-toggle>
      <mat-datepicker #datePickerFrom></mat-datepicker>
    </mat-form-field>

    <mat-form-field fxFlex="30">
      <input matInput [matDatepicker]="datePickerTo" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [for]="datePickerTo"></mat-datepicker-toggle>
      <mat-datepicker #datePickerTo></mat-datepicker>
    </mat-form-field>

    // want new line here

    <mat-form-field fxFlex="41">
        <input matInput placeholder="Name">
    </mat-form-field>

    <mat-form-field fxFlex="30">
      <input matInput placeholder="Surename">
    </mat-form-field>

    <mat-form-field fxFlex="20">
      <mat-select placeholder="Details">
          <mat-option *ngFor="let d of details" [value]="d.value">
            {{ d.viewValue }}
          </mat-option>
        </mat-select>
    </mat-form-field>
  </div>

I want last three mat-form-field elements always started on a new column.

How would you do that using flex-layout without changing the html layout?

Currrently I achieve that by setting fxFlex=41 on the input but - this way the new line gets started, but it won't work if I set the fxFlex less than 41 or if I set the fxFlex on datepickers less then 30.

Answer 1

使用此代替代码

:ex