angular - 如何正确使用@angular/flex-layout？

Question

我正在使用 @angular/flex-layout 创建网络应用程序.

当屏幕小于 600px (xs) 时，我尝试左右留出 5% 的边距。它在大屏幕上工作正常(当有 fxLayout="row"-layout 时)，但在 xs 和 fxLayout="column"-情况。

Here is a demonstration in Plunker.

问题:如何让div的不填充右边的剩余空间，但只占90%左右偏移 5%？

Answer 1

最后，我使用了与@Nehal 类似的方法，但我使用了 ngClass.xs 而不是 ngStyle.xs 并让它工作正常。

<div fxLayout.xs="column"
     fxLayout.gt-xs="row"
     fxFlex.xs="grow"
     fxFlex.gt-xs="grow">
  <div ngClass.xs="section-title-xs-margin"
       fxFlex.xs="90"
       fxFlex.gt-xs="25"
       fxFlex.gt-sm="20"
       fxFlexOffset.xs="5"
       fxFlexOffset.gt-xs="5"
       fxFlexOffset.gt-sm="10">
    Left / Top
  </div>
  <div ngClass.xs="content-xs-margin"
       fxFlex.xs="90"
       fxFlex.gt-xs="63"
       fxFlex.gt-sm="55"
       fxFlexOffset.xs="5"
       fxFlexOffset.gt-xs="2"
       fxFlexOffset.gt-sm="5">
    Right / Bottom
  </div>
</div>

在 CSS 中:

.section-title-xs-margin {
  margin-right: 5%;
}

.content-xs-margin {
  margin-right: 5%;
}