angular - Flex 布局高度问题

Question

我在应用 fxFlex 时遇到增加和减少 div 高度的问题。我为容器提供了动态高度。我该如何解决这个问题？

提前致谢。 Demo here

<div class="container">
   <div fxFlex="30"> Some Text </div>
   <div fxFlex="40"> Some Text </div>
   <div fxFlex="30"> Some Text </div>
</div>

注意:动态提供容器的高度(根据窗口大小/调整大小)

截图:

Answer 1

使用 fxFlexFill 可以执行以下操作:StackBlitz HERE

<div class="container" style="padding: 20px" fxFlexFill fxLayoutGap="10px">
  <div fxFlex="30"><mat-card>Some Text</mat-card></div>
  <div fxFlex="40"><mat-card>Some Text</mat-card></div>
  <div fxFlex="30"><mat-card>Some Text</mat-card></div>
</div>

fxFlexFill 允许您根据它可以容纳的内容设置 div 的高度。

所以我为您的 HTML 页面添加了以下 CSS 以根据您的屏幕采用最大高度。

html, body {height: 100%; margin: 0;}

演示: