如何更改 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 的有用信息和示例。