新行中的 Angular flex-layout 下一个元素答案

【问题标题】：Angular flex-layout next element from the new line新行中的 Angular flex-layout 下一个元素
【发布时间】：2018-03-22 23:56:12
【问题描述】：

我有这样的布局：

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

我希望最后三个 mat-form-field 元素始终从新列开始。

如何在不改变 html 布局的情况下使用 flex-layout 做到这一点？

目前我通过在输入上设置 fxFlex=41 来实现这一点，但是 - 这样新行就开始了，但是如果我将 fxFlex 设置为小于 41 或者如果我设置了 @987654328，它将不起作用@ 在日期选择器上少于 30。

【问题讨论】：

您能说明一下您对布局的设想吗？您的容器声明了行布局，但您希望最后 3 个表单字段位于列中？例如。你想要 3 列并排，或者你想要它们堆叠成一列？也许你想要完成的一个简单的图像会有很大帮助。
@Narm 刚刚更新了问题
当您说“不更改 html 布局”时，您的意思是绝对不能添加/使用额外的 HTML 吗？如果您将分组的表单字段包装在自己的行中，您显示的布局将很容易完成。
@Narm 所以你是说如果不添加额外的 html 就无法实现这一目标？

标签： angular angular-flex-layout

【解决方案1】：

用这个代替你的代码

<div fxLayout="row">
<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>
</div>
<div fxLayout="row">
<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>

【讨论】：