如何更改 Window 上的 fxFlex 尺寸尺寸变化？

Question

我的主 fxLayout 容器中有两个 div。 它们看起来像这样：

其中红框是 fxLayout Container，蓝框是 Information，黑框是 Chart。 可以注意到，图表 div 比信息框的 div 大。 我希望它在任何时候都调整大小时保持这种状态。 为了实现这一点，我做了以下工作：

信息.component.html：

这个组件只是一个带有几个mat-card的盒子。 它也在一个fxLayout容器中。

<div id = "dataInformation" fxLayout="column" fxLayoutAlign="space-evenly center" fxLayoutGap="5%"> 

    <h1>CrowBox Information</h1>
    
    <!-- ...CODE FOR DROPDOWN BUTTON... -->

    <!-- ...EXAMPLE MAT-CARD... -->
    <mat-card>
        <mat-card-title>NICKNAME</mat-card-title>
        <mat-card-content>{{ crowboxNickname }}</mat-card-content>
    </mat-card>


    <!-- ...SAME MAT-CARDS JUST WITH DIFFERENT PROPERTIES... -->

</div>

唯一应用的样式是width:75%用于.mat-card和字体相关样式。

然后我在另一个组件中调用这个组件。

data.component.html

在这里，我创建图表，调用information.component并将所有这些放在另一个 fxLayout 容器中。 我还指定了如果调整 window 的大小会发生什么。 当容器从行变为列时，我希望大小比例保持不变。 但是，由于某种原因， fxFlex.xs似乎对我不起作用，并且图表最终看起来非常小，如下所示：

<div class="wrapper" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center" >
    
    <div id = "charts" fxFlex="60" fxFlex.xs="60">
        <!-- THE CHART -->
        <div *ngIf="showCoinsDeposited === false"  >
            <canvas baseChart
                   [datasets]="crowOnPerchChartData"
                   [labels]="crowOnPerchChartLabels"
                   [options]="crowOnPerchChartOptions"
                   [legend]="crowOnPerchChartLegend"
                   [chartType]="crowOnPerchChartType"
                   [colors]="crowOnPerchChartColor"
                   >
            </canvas>             
        </div>
        <!-- ...ANOTHER CHART HERE... -->
    </div>

    <!-- THE INFORMATION BOX -->
    <div fxFlex="27" fxFlex.xs="27"  style="border: blue; border-style: double;">
        <app-information [crowsOnPerch]="crownsOnPerchValues" [coinsDeposited]="coinsDepositedValues"></app-information>
    </div>
   
</div>

我已将图表的fxFlex.xs设置为 60，将信息框的fxFlex.xs设置为 27。我认为这没有得到准确反映，似乎无法弄清楚原因。 我希望图表填充屏幕的宽度并且更大。 我怎样才能做到这一点？

注意：图表和包装器没有任何位置样式（仅 fonts 和边框）。

Answer 1

如果我没记错的话，您希望在使用 xs 屏幕时将两个框放在不同的行上。

注意： fxFlex="60"是fxFlex="1 1 60%"的简写。

我认为最好删除fxLayout.xs="column"并使用fxLayout="row wrap"并为您的图表 div 添加fxFlex.xs="100"或其他任何内容。 然后在为下一个框添加fxFlex.xs之后，如果大小的总和超过 100，则下一项将 go 到下一行。

<div fxLayout="row wrap" fxLayoutAlign="space-evenly center">
  <div fxFlex="60" fxFlex.xs="87" style="background: green">
    box1
  </div>
  <div fxFlex="27" fxFlex.xs="40" style="background: yellow;">
    box2
  </div>
</div>

此外，这里和这里有很多关于 flex-layout 的有用信息和示例。