Flex布局内容无法正确显示

Question

当屏幕尺寸过小（xs）时，我试图显示100％的内容。但它不起作用。

<ng-template #chatlistwithwindow>
  <div class="main-content">
    <div fxLayout="row" fxLayoutAlign="start start">
      <app-chat-user-list fxFlex.xs="100%" fxFlex.gt-xs="23%" fxFlexFill></app-chat-user-list>
      <app-chat-window fxFlex.xs="100%" fxFlex.gt-xs="77%" fxFlexFill *ngIf="toShow" (closeChatWindow)="setToShow(toShow)"></app-chat-window>
    </div>
  </div>
</ng-template>

当屏幕尺寸过小时，预期结果应为的100％。当从中选择用户时显示。

图片显示内容对齐问题：

Answer 1

免责声明：我不确定我是否正确理解了您的问题。如果我弄错了，请添加更多详细信息。

我对您的问题的理解：您想

• 在屏幕尺寸为XS时显示一个元素宽度为100％的宽度，而隐藏另一个元素
• 当屏幕大于XS时，显示一个元素宽度为23％的宽度，另一个显示其余宽度，

您可以使用以下代码段实现此目的：

<div class="content" fxLayout="row">
  <div fxFlex fxFlex.gt-xs="23%" class="side">XS: 23%, 100% else</div>
  <div fxFlex fxHide.xs="true" class="main">MAIN</div>
</div>

在此处找到实时示例：https://stackblitz.com/edit/angular-7dhkyx