如何用弹性框填充所有可用空间

Question

我有三个弹性容器，我想让它们以最有效的方式填充可用空间。我希望网页标题旁边的切换按钮直接位于标题旁边，而不是位于下一行，以节省较小屏幕上的空间。

这就是我的代码目前的样子。

HTML：

<header class="grid-header">
  <h1 class="app-heading-5">Sample Report</h1>
  <div class="grid-toolbar">
    <form class="form" [formGroup]="form">
      <mat-slide-toggle
        class="align-self-center"
        formControlName="groupByCountry"
        color="primary"
        [labelPosition]="'before'"
      >
        Country
      </mat-slide-toggle>
      <mat-slide-toggle
        class="align-self-center"
        formControlName="showChart"
        color="primary"
        [labelPosition]="'before'"
      >
        Chart
      </mat-slide-toggle>
      <kendo-floatinglabel class="filter-lg" text="Filter by Country...">
        <kendo-multiselect
          fillMode="flat"
          formControlName="country"
          [data]="countries$ | async"
          [filterable]="true"
          [valueField]="'fmsCountryCode'"
          [textField]="'narr'"
          [kendoDropDownFilter]="filterSettings"
        >
        </kendo-multiselect>
      </kendo-floatinglabel>
      <kendo-floatinglabel text="From Yr...">
        <kendo-combobox
          fillMode="flat"
          formControlName="fromYear"
          [data]="expYears$ | async"
          [filterable]="true"
          [kendoDropDownFilter]="filterSettings"
        ></kendo-combobox>
      </kendo-floatinglabel>
      <kendo-floatinglabel text="To Yr...">
        <kendo-combobox
          fillMode="flat"
          formControlName="toYear"
          [data]="expYears$ | async"
          [filterable]="true"
          [kendoDropDownFilter]="filterSettings"
        ></kendo-combobox>
      </kendo-floatinglabel>
      <kendo-floatinglabel class="filter-md" text="Filter by Part Name...">
        <kendo-combobox
          fillMode="flat"
          formControlName="partName"
          [data]="partNames$ | async"
          [filterable]="true"
          [kendoDropDownFilter]="filterSettings"
        ></kendo-combobox>
      </kendo-floatinglabel>
    </form>
    <button
      [disabled]="disableExport$ | async"
      kendoButton
      [primary]="true"
      (click)="exportFromApi()"
      title="Export to Excel"
    >
      Export
      <fa-icon [icon]="faFileExcel" size="lg"></fa-icon>
    </button>
  </div>
</header>

SCSS```
.grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-block: 0.5rem;

    .grid-toolbar,
    .form {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: flex-start;

      kendo-floatinglabel {
        width: 12.5rem;
      }

      .k-input {
        width: 12.5rem;
      }
    }

    button {
      align-self: center;
    }
  }

Answer 1

我相信你可以得到页面宽度并将其除以3？如果我错了请纠正我。