Flex Layout 内容显示不准确

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

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

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

显示一个元素宽度100%宽度，当屏幕尺寸为XS时隐藏另一个元素
当屏幕大于 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

Flex Layout 内容显示不准确

Flex Layout content not showing accurately

angular

angular-flex-layout