如何在窗口大小更改时更改 fxFlex 大小？答案

【问题标题】：How to change fxFlex size on Window Size change?如何在窗口大小更改时更改 fxFlex 大小？
【发布时间】：2022-07-08 00:49:53
【问题描述】：

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

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

information.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 容器中。我还指定了如果调整窗口大小会发生什么。当容器从行变为列时，我希望大小比例保持不变。但是，由于某种原因，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。我认为这没有准确反映，似乎无法弄清楚原因。我希望图表填充屏幕的宽度并且更大。我怎样才能做到这一点？

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

【问题讨论】：

标签： css angular responsive-design flex4 angular-flex-layout

【解决方案1】：

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

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

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

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

另外，here 和 here 中有很多关于 flex-layout 的有用信息和示例。

【讨论】：